From bab3ff33bdb208f2053252ac337de01f49574708 Mon Sep 17 00:00:00 2001 From: Max Schmitt Date: Fri, 4 Sep 2020 11:34:27 +0200 Subject: [PATCH] fix: added type=search to input fiel This does prevents the autocomplete window to be shown in Chromium based browsers See here for more information about that issue. https://github.com/ant-design/ant-design/issues/18808 --- src/Selector/Input.tsx | 1 + tests/Input.test.tsx | 28 ++++++++++++++++++++++ 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 ++++ 6 files changed, 50 insertions(+) create mode 100644 tests/Input.test.tsx 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/Input.test.tsx b/tests/Input.test.tsx new file mode 100644 index 000000000..301d66b03 --- /dev/null +++ b/tests/Input.test.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import Input from '../src/Selector/Input'; + +describe('Selector.Input', () => { + it('renders correctly', () => { + const noop = () => null; + const wrapper = mount( + } + disabled={false} + autoFocus={false} + editable={false} + accessibilityIndex={1} + value="abc" + open={false} + tabIndex={-5} + onKeyDown={noop} + onMouseDown={noop} + onChange={noop} + />, + ); + + expect(wrapper.find('input').prop('type')).toBe('search'); + }); +}); 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="" />