fix: render select input as text combobox (#1222)

Author: QDyanbing

src/SelectInput/Input.tsx

@@ -161,7 +161,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
   // Extract shared input props
   const sharedInputProps = {
     id,
-    type: mode === 'combobox' ? 'text' : 'search',
+    type: 'text',
     ...restProps,
     ref: inputRef as React.Ref<HTMLInputElement>,
     style: {
@@ -170,7 +170,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
       '--select-input-width': widthCssVar,
     } as React.CSSProperties,
     autoFocus,
-    autoComplete: autoComplete || 'off',
+    autoComplete: autoComplete || 'new-password',
     className: inputCls,
     disabled,
     value: value || '',

tests/Accessibility.test.tsx

@@ -285,6 +285,9 @@ describe('Select.Accessibility', () => {
 
       const input = container.querySelector('input');
       expect(input).toHaveAttribute('role', 'combobox');
+      // https://github.com/ant-design/ant-design/issues/57904
+      expect(input).toHaveAttribute('type', 'text');
+      expect(input).not.toHaveAttribute('list');
       expect(input).toHaveAttribute('aria-expanded', 'false');
       expect(input).toHaveAttribute('aria-haspopup', 'listbox');
       expect(input).not.toHaveAttribute('aria-owns');

tests/Select.test.tsx

@@ -1424,14 +1424,16 @@ describe('Select.Basic', () => {
     expect(container.querySelector('.rc-select-item-empty').textContent).toEqual('Not Found');
   });
 
-  it('search input type', () => {
+  it('uses text input type and disables browser autocomplete for search', () => {
     const { container } = render(
       <Select showSearch open>
         <Option value="1">1</Option>
         <Option value="2">2</Option>
       </Select>,
     );
-    expect(container.querySelector('input').getAttribute('type')).toBe('search');
+    const input = container.querySelector('input');
+    expect(input.getAttribute('type')).toBe('text');
+    expect(input.getAttribute('autocomplete')).toBe('new-password');
   });
 
   it('warns on invalid children', () => {

tests/__snapshots__/Combobox.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`Select.Combobox renders controlled correctly 1`] = `
       aria-autocomplete="list"
       aria-expanded="false"
       aria-haspopup="listbox"
-      autocomplete="off"
+      autocomplete="new-password"
       class="rc-select-input"
       id="test-id"
       role="combobox"
@@ -45,7 +45,7 @@ exports[`Select.Combobox renders correctly 1`] = `
       aria-autocomplete="list"
       aria-expanded="false"
       aria-haspopup="listbox"
-      autocomplete="off"
+      autocomplete="new-password"
       class="rc-select-input"
       id="test-id"
       role="combobox"

tests/__snapshots__/Select.test.tsx.snap

@@ -123,11 +123,11 @@ exports[`Select.Basic render renders aria-attributes correctly 1`] = `
       aria-haspopup="listbox"
       aria-label="some-label"
       aria-labelledby="test-id"
-      autocomplete="off"
+      autocomplete="new-password"
       class="antd-input"
       id="test-id"
       role="combobox"
-      type="search"
+      type="text"
       value=""
     />
   </div>
@@ -152,11 +152,11 @@ exports[`Select.Basic render renders correctly 1`] = `
       aria-autocomplete="list"
       aria-expanded="false"
       aria-haspopup="listbox"
-      autocomplete="off"
+      autocomplete="new-password"
       class="antd-input"
       id="test-id"
       role="combobox"
-      type="search"
+      type="text"
       value=""
     />
   </div>
@@ -183,11 +183,11 @@ exports[`Select.Basic render renders data-attributes correctly 1`] = `
       aria-autocomplete="list"
       aria-expanded="false"
       aria-haspopup="listbox"
-      autocomplete="off"
+      autocomplete="new-password"
       class="antd-input"
       id="test-id"
       role="combobox"
-      type="search"
+      type="text"
       value=""
     />
   </div>
@@ -212,12 +212,12 @@ exports[`Select.Basic render renders disabled select correctly 1`] = `
       aria-autocomplete="list"
       aria-expanded="false"
       aria-haspopup="listbox"
-      autocomplete="off"
+      autocomplete="new-password"
       class="antd-input"
       disabled=""
       id="test-id"
       role="combobox"
-      type="search"
+      type="text"
       value=""
     />
   </div>
@@ -239,11 +239,11 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
       aria-autocomplete="list"
       aria-expanded="false"
       aria-haspopup="listbox"
-      autocomplete="off"
+      autocomplete="new-password"
       class="antd-input"
       id="test-id"
       role="button"
-      type="search"
+      type="text"
       value=""
     />
   </div>

tests/__snapshots__/Tags.test.tsx.snap

@@ -65,12 +65,12 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
           aria-expanded="true"
           aria-haspopup="listbox"
           aria-owns="test-id_list"
-          autocomplete="off"
+          autocomplete="new-password"
           class="rc-select-input"
           id="test-id"
           role="combobox"
           style="--select-input-width: 0;"
-          type="search"
+          type="text"
           value=""
         />
       </div>

tests/__snapshots__/ssr.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Select.SSR should work 1`] = `"<div class="rc-select rc-select-single"><div class="rc-select-content"><div class="rc-select-placeholder" style="visibility:visible"></div><input id="test-id" type="search" readonly="" autoComplete="off" class="rc-select-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-autocomplete="list" value=""/></div></div>"`;
+exports[`Select.SSR should work 1`] = `"<div class="rc-select rc-select-single"><div class="rc-select-content"><div class="rc-select-placeholder" style="visibility:visible"></div><input id="test-id" type="text" readonly="" autoComplete="new-password" class="rc-select-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-autocomplete="list" value=""/></div></div>"`;