fix: Input type search (#538)

* fix: input should be type="search"

prevent autocomplete to be shown in Chromium

close #469
close ant-design/ant-design#18808

* test: update snapshot

* remove search-cancel-button style

* update history

Author: afc163

HISTORY.md

@@ -1,207 +1 @@
-# History
-----
-
-## 10.3.0 / 2020-05-08
-
-- Adjust trigger order of `onChange` & `onSelect`
-
-## 9.2.0 / 2019-07-16
-
-- Adjust trigger order of `onChange` & `onSelect`
-
-## 9.0.0 / 2019-02-27
-
-- Multiple mode also support `showArrow`
-- Add loading className
-
-## 8.8.0 / 2019-01-29
-
-- Add an additional className when popup is empty
-
-## 8.6.0 / 2018-11-27
-
-- Added `loading` prop.
-- Allow search Option Group title.
-
-## 8.5.0 / 2018-11-26
-
-- Added `dropdownRender` prop.
-
-## 8.4.0 / 2018-10-08
-
-- Adjust focus / blur logic
-- Space support open select
-
-## 8.3.0 / 2018-09-28
-
-- `open` support controlled
-
-## 8.2.0 / 2018-08-07
-
-- Add inputIcon, clearIcon, removeIcon.
-
-## 8.1.0 / 2018-06-24
-
-- Add id prop.
-- Support data attributes. https://github.com/react-component/select/pull/305
-
-## 8.0.2 / 2018-05-03
-
-- Refactoring: Migrate to new lifecycle methods https://github.com/react-component/select/pull/291
-
-## 8.0.0 / 2018-04-28
-
-- Upgrade rc-menu to 7.0.1
-- Add prop `autoClearSearchValue`.
-
-## 7.7.8 / 2018-04-19
-
-- Fix: value is wrong when blur https://github.com/react-component/select/pull/290
-
-## 7.7.6 / 2018-03-30
-
-- Refactoring: update state.value format https://github.com/react-component/select/pull/277
-
-## 7.7.5 / 2018-03-13
-
-- Fire change on blur for tags mode https://github.com/react-component/select/pull/271
-- Fix defaultFilter can not filter array children https://github.com/react-component/select/pull/276
-
-## 7.5.0 / 2017-12-11
-
-- Add onInputKeydown
-
-## 7.2.0 / 2017-11-16
-
-- Add onPopupScroll.
-
-## 7.0.0 / 2017-10-30
-
-- Allow numbe value in Option
-- Add maxTagCount and maxTagTextLength https://github.com/react-component/select/pull/224
-- Add showAction https://github.com/react-component/select/pull/224
-- Add onMouseEnter and onMouseLeave https://github.com/react-component/select/pull/238
-- Add focus() and autoFocus
-
-## 6.9.0 / 2017-09-01
-
-- add backfill in single/combobox mode
-
-## 6.8.0 / 2017-03-24
-
-- support allowClear in multiple/tags mode
-
-## 6.7.0 / 2017-01-03
-
-- support getInputElement https://github.com/react-component/select/pull/145
-
-## 6.6.0 / 2016-11-01
-
-- add tokenSeparators for multiple and tag mode
-
-## 6.4.0 / 2016-05-26
-
-- auto expand input in ie10/11 https://github.com/react-component/select/pull/93
-- realign when value change. https://github.com/react-component/select/pull/92
-
-## 6.3.0 / 2016-04-28
-
-- support onBlur
-
-## 6.2.0 / 2016-04-20
-
-- remove searchPlaceholder
-
-## 6.1.0 / 2016-04-18
-
-- go with http://semantic-ui.com/modules/dropdown.html#search-selection
-
-## 6.0.0 / 2016-03-16
-
-- remove defaultLabel/label
-- add labelInValue prop to control label
-- support dropdownAlign
-
-## 5.8.0 / 2016-01-11
-
-- support value type to be number
-
-## 5.7.0 / 2016-01-06
-
-- add getPopupContainer prop
-
-## 5.6.0 / 2016-01-01
-
-- scroll to active item when open menu on single mode
-
-## 5.5.0 / 2015-12-22
-
-- add defaultActiveFirstOption prop
-
-## 5.4.0 / 2015-12-01
-
-- fix disabled for old ie
-
-## 5.3.0 / 2015-11-30
-
-- add choiceTransitionName prop
-
-## 5.2.0 / 2015-11-24
-
-- do not hide dropdown on multiple or tag mode
-
-## 5.0.0 / 2015-10-22
-
-- only support react 0.14+
-- auto adjust position if visible region is not enough
-
-## 4.9.0 / 2015-09-10
-
-- add label for onChange listener
-
-## 4.8.0 / 2015-08-20
-
-- make value a controlled value
-- add defaultValue prop
-- remove renderDropdownToBody prop. defaults to true
-
-## 4.7.0 / 2015-08-18
-
-implement searchPlaceholder to prevent bug for ie10
-
-## 4.5.0 / 2015-07-30
-
-use rc-animate & rc-align. (assets change)
-
-## 4.4.0 / 2015-07-15
-
-`new` support dropdownStyle dropdownMenuStyle prop
-
-## 4.3.0 / 2015-07-14
-
-`new` [#17](https://github.com/react-component/select/issues/17) support render dropdown to body
-
-## 4.2.0 / 2015-07-07
-
-`improved` [#15](https://github.com/react-component/select/issues/15) fix input in multiple mode
-
-## 4.1.0 / 2015-07-01
-
-`new` [#13](https://github.com/react-component/select/issues/13) add maxTagTextLength
-
-## 4.0.0 / 2015-06-26
-
-https://github.com/react-component/select/issues/11
-
-## 3.5.0 / 2015-06-17
-
-`new` [#6](https://github.com/react-component/select/issues/6) add OptGroup
-
-
-## 3.4.0 / 2015-06-15
-
-`new` support showSearch/animation/transitionName/disabled props
-
-## 3.1.0 / 2015-03-23
-
-`new` [#2](https://github.com/react-component/select/pull/2) support tags config
+See https://github.com/react-component/select/releases

assets/index.less

@@ -53,6 +53,16 @@
     opacity: 0.4;
   }
 
+  // ============== Search ===============
+  .@{select-prefix}-selection-search-input {
+    appearance: none;
+
+    &::-webkit-search-cancel-button {
+      display: none;
+      appearance: none;
+    }
+  }
+
   // --------------- Single ----------------
   &-single {
     .@{select-prefix}-selector {

src/Selector/Input.tsx

@@ -73,6 +73,7 @@ const Input: React.RefForwardingComponent<InputRef, InputProps> = (
     disabled,
     tabIndex,
     autoComplete: autoComplete || 'off',
+    type: 'search',
     autoFocus,
     className: `${prefixCls}-selection-search-input`,
     style: { ...style, opacity: editable ? null : 0 },

tests/Select.test.tsx

@@ -870,6 +870,16 @@ describe('Select.Basic', () => {
     expect(wrapper.find('.rc-select-item-empty').text()).toEqual('Not Found');
   });
 
+  it('search input type', () => {
+    const wrapper = mount(
+      <Select showSearch open>
+        <Option value="1">1</Option>
+        <Option value="2">2</Option>
+      </Select>,
+    );
+    expect(wrapper.find('input').prop('type')).toBe('search');
+  });
+
   it('warns on invalid children', () => {
     const Foo = value => <div>foo{value}</div>;
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => null);

tests/__snapshots__/Combobox.test.tsx.snap

@@ -20,6 +20,7 @@ exports[`Select.Combobox renders correctly 1`] = `
         class="rc-select-selection-search-input"
         id="rc_select_TEST_OR_SSR"
         role="combobox"
+        type="search"
         value=""
       />
     </span>

tests/__snapshots__/Multiple.test.tsx.snap

@@ -23,6 +23,7 @@ exports[`Select.Multiple render not display maxTagPlaceholder if maxTagCount not
         readonly=""
         role="combobox"
         style="opacity: 0;"
+        type="search"
         unselectable="on"
         value=""
       />
@@ -116,6 +117,7 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla
         readonly=""
         role="combobox"
         style="opacity: 0;"
+        type="search"
         unselectable="on"
         value=""
       />
@@ -206,6 +208,7 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla
         readonly=""
         role="combobox"
         style="opacity: 0;"
+        type="search"
         unselectable="on"
         value=""
       />
@@ -285,6 +288,7 @@ exports[`Select.Multiple render truncates values by maxTagTextLength 1`] = `
         readonly=""
         role="combobox"
         style="opacity: 0;"
+        type="search"
         unselectable="on"
         value=""
       />

tests/__snapshots__/Select.test.tsx.snap

@@ -22,6 +22,7 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
         readonly=""
         role="combobox"
         style="opacity:0"
+        type="search"
         unselectable="on"
         value=""
       />
@@ -149,6 +150,7 @@ exports[`Select.Basic filterOption could be true as described in default value 1
         class="rc-select-selection-search-input"
         id="rc_select_TEST_OR_SSR"
         role="combobox"
+        type="search"
         value="3"
       />
     </span>
@@ -203,6 +205,7 @@ exports[`Select.Basic no search 1`] = `
         readonly=""
         role="combobox"
         style="opacity:0"
+        type="search"
         unselectable="on"
         value=""
       />
@@ -252,6 +255,7 @@ exports[`Select.Basic render renders aria-attributes correctly 1`] = `
         readonly=""
         role="combobox"
         style="opacity:0"
+        type="search"
         unselectable="on"
         value=""
       />
@@ -309,6 +313,7 @@ exports[`Select.Basic render renders correctly 1`] = `
         readonly=""
         role="combobox"
         style="opacity:0"
+        type="search"
         unselectable="on"
         value=""
       />
@@ -368,6 +373,7 @@ exports[`Select.Basic render renders data-attributes correctly 1`] = `
         readonly=""
         role="combobox"
         style="opacity:0"
+        type="search"
         unselectable="on"
         value=""
       />
@@ -427,6 +433,7 @@ exports[`Select.Basic render renders disabled select correctly 1`] = `
         readonly=""
         role="combobox"
         style="opacity:0"
+        type="search"
         unselectable="on"
         value=""
       />
@@ -471,6 +478,7 @@ exports[`Select.Basic render renders dropdown correctly 1`] = `
         autocomplete="off"
         class="antd-selection-search-input"
         role="combobox"
+        type="search"
         value=""
       />
     </span>
@@ -654,6 +662,7 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
         readonly=""
         role="button"
         style="opacity:0"
+        type="search"
         unselectable="on"
         value=""
       />
@@ -712,6 +721,7 @@ exports[`Select.Basic should contain falsy children 1`] = `
         readonly=""
         role="combobox"
         style="opacity:0"
+        type="search"
         unselectable="on"
         value=""
       />
@@ -849,6 +859,7 @@ exports[`Select.Basic should render custom dropdown correctly 1`] = `
         readonly=""
         role="combobox"
         style="opacity: 0;"
+        type="search"
         unselectable="on"
         value=""
       />