From f7b23221c5a7a76a497396c697fb84ee5d7ab5bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Fri, 4 Sep 2020 17:50:25 +0800 Subject: [PATCH] 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 --- HISTORY.md | 208 +-------------------- assets/index.less | 10 + src/Selector/Input.tsx | 1 + tests/Select.test.tsx | 10 + tests/__snapshots__/Combobox.test.tsx.snap | 1 + tests/__snapshots__/Multiple.test.tsx.snap | 4 + tests/__snapshots__/Select.test.tsx.snap | 11 ++ tests/__snapshots__/Tags.test.tsx.snap | 5 + 8 files changed, 43 insertions(+), 207 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index 22b8e713b..e6ee86e84 100644 --- a/HISTORY.md +++ b/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 \ No newline at end of file diff --git a/assets/index.less b/assets/index.less index dad6f7162..cbd4a1309 100644 --- a/assets/index.less +++ b/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 { diff --git a/src/Selector/Input.tsx b/src/Selector/Input.tsx index c839227ee..9d78b9dc0 100644 --- a/src/Selector/Input.tsx +++ b/src/Selector/Input.tsx @@ -73,6 +73,7 @@ const Input: React.RefForwardingComponent = ( disabled, tabIndex, autoComplete: autoComplete || 'off', + type: 'search', autoFocus, className: `${prefixCls}-selection-search-input`, style: { ...style, opacity: editable ? null : 0 }, diff --git a/tests/Select.test.tsx b/tests/Select.test.tsx index 00a08bc63..e32342d67 100644 --- a/tests/Select.test.tsx +++ b/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( + , + ); + expect(wrapper.find('input').prop('type')).toBe('search'); + }); + it('warns on invalid children', () => { const Foo = value =>
foo{value}
; const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => null); diff --git a/tests/__snapshots__/Combobox.test.tsx.snap b/tests/__snapshots__/Combobox.test.tsx.snap index 955e549b2..539691b92 100644 --- a/tests/__snapshots__/Combobox.test.tsx.snap +++ b/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="" /> diff --git a/tests/__snapshots__/Multiple.test.tsx.snap b/tests/__snapshots__/Multiple.test.tsx.snap index c73751b07..03be8fbcd 100644 --- a/tests/__snapshots__/Multiple.test.tsx.snap +++ b/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="" /> diff --git a/tests/__snapshots__/Select.test.tsx.snap b/tests/__snapshots__/Select.test.tsx.snap index 792986e61..ccbec1d51 100644 --- a/tests/__snapshots__/Select.test.tsx.snap +++ b/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" /> @@ -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="" /> @@ -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="" /> diff --git a/tests/__snapshots__/Tags.test.tsx.snap b/tests/__snapshots__/Tags.test.tsx.snap index 5ba2236c9..91f9f0123 100644 --- a/tests/__snapshots__/Tags.test.tsx.snap +++ b/tests/__snapshots__/Tags.test.tsx.snap @@ -65,6 +65,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = ` class="rc-select-selection-search-input" id="rc_select_TEST_OR_SSR" role="combobox" + type="search" value="" />