From 4ce87b2baf221d32bb616dbc3347290352031d54 Mon Sep 17 00:00:00 2001 From: emyarod Date: Thu, 5 Nov 2020 13:07:54 -0600 Subject: [PATCH 1/3] fix(Search): compose change event handlers --- packages/react/src/components/Search/Search.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/Search/Search.js b/packages/react/src/components/Search/Search.js index 0a395f23904a..7882db966522 100644 --- a/packages/react/src/components/Search/Search.js +++ b/packages/react/src/components/Search/Search.js @@ -10,6 +10,7 @@ import React, { Component } from 'react'; import classNames from 'classnames'; import { Search16, Close16 } from '@carbon/icons-react'; import { settings } from 'carbon-components'; +import { composeEventHandlers } from '../../tools/events'; import deprecate from '../../prop-types/deprecate'; const { prefix } = settings; @@ -151,6 +152,7 @@ export default class Search extends Component { size = !small ? 'xl' : 'sm', light, disabled, + onChange, ...other } = this.props; @@ -186,7 +188,7 @@ export default class Search extends Component { className={`${prefix}--search-input`} id={id} placeholder={placeHolderText} - onChange={this.handleChange} + onChange={composeEventHandlers([onChange, this.handleChange])} ref={(input) => { this.input = input; }} From af0dd9f00b93af7d2edd6410fe67a5bf586215de Mon Sep 17 00:00:00 2001 From: emyarod Date: Thu, 5 Nov 2020 13:08:25 -0600 Subject: [PATCH 2/3] feat(Search): add Esc button support to clear input field --- .../react/src/components/Search/Search-story.js | 2 +- packages/react/src/components/Search/Search.js | 14 ++++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/Search/Search-story.js b/packages/react/src/components/Search/Search-story.js index c5e3430f5b56..85f38e3c1c2c 100644 --- a/packages/react/src/components/Search/Search-story.js +++ b/packages/react/src/components/Search/Search-story.js @@ -9,7 +9,6 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; - import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; import Search from '../Search'; import SearchSkeleton from '../Search/Search.Skeleton'; @@ -37,6 +36,7 @@ const props = () => ({ ), placeHolderText: text('Placeholder text (placeHolderText)', 'Search'), onChange: action('onChange'), + onKeyDown: action('onKeyDown'), }); export default { diff --git a/packages/react/src/components/Search/Search.js b/packages/react/src/components/Search/Search.js index 7882db966522..cad1f3aa8b55 100644 --- a/packages/react/src/components/Search/Search.js +++ b/packages/react/src/components/Search/Search.js @@ -11,6 +11,7 @@ import classNames from 'classnames'; import { Search16, Close16 } from '@carbon/icons-react'; import { settings } from 'carbon-components'; import { composeEventHandlers } from '../../tools/events'; +import { keys, match } from '../../internal/keyboard'; import deprecate from '../../prop-types/deprecate'; const { prefix } = settings; @@ -57,6 +58,11 @@ export default class Search extends Component { */ onChange: PropTypes.func, + /** + * Provide a handler that is invoked on the key down event for the input + */ + onKeyDown: PropTypes.func, + /** * Provide an optional placeholder text for the Search. * Note: if the label and placeholder differ, @@ -138,6 +144,12 @@ export default class Search extends Component { this.props.onChange(evt); }; + handleKeyDown = (evt) => { + if (match(evt, keys.Escape)) { + this.clearInput(evt); + } + }; + render() { const { className, @@ -153,6 +165,7 @@ export default class Search extends Component { light, disabled, onChange, + onKeyDown, ...other } = this.props; @@ -189,6 +202,7 @@ export default class Search extends Component { id={id} placeholder={placeHolderText} onChange={composeEventHandlers([onChange, this.handleChange])} + onKeyDown={composeEventHandlers([onKeyDown, this.handleKeyDown])} ref={(input) => { this.input = input; }} From 2bdf52965e94f2e93351f94fd1bc54468d365175 Mon Sep 17 00:00:00 2001 From: emyarod Date: Thu, 5 Nov 2020 13:14:23 -0600 Subject: [PATCH 3/3] chore: update snapshots --- packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 3 +++ .../DataTable/__tests__/__snapshots__/DataTable-test.js.snap | 2 ++ .../__tests__/__snapshots__/TableToolbarSearch-test.js.snap | 1 + 3 files changed, 6 insertions(+) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index b797cf7cbfed..c25f91523491 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -4510,6 +4510,9 @@ Map { "onChange": Object { "type": "func", }, + "onKeyDown": Object { + "type": "func", + }, "placeHolderText": Object { "type": "string", }, diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap index e99892403fbf..001a5bc67bf9 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap @@ -2353,6 +2353,7 @@ exports[`DataTable should render 1`] = ` className="bx--search-input" id="custom-id" onChange={[Function]} + onKeyDown={[Function]} placeholder="Filter table" role="searchbox" tabIndex="0" @@ -3360,6 +3361,7 @@ exports[`DataTable sticky header should render 1`] = ` className="bx--search-input" id="custom-id" onChange={[Function]} + onKeyDown={[Function]} placeholder="Filter table" role="searchbox" tabIndex="0" diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap index f7efbae2a0c3..c975692afabf 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap @@ -77,6 +77,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = ` className="bx--search-input" id="custom-id" onChange={[Function]} + onKeyDown={[Function]} placeholder="Filter table" role="searchbox" tabIndex="-1"