feat(search): add onClear callback prop to Search/DataTableSearch (#9737

) * feat(search): add onClear callback prop to Search/DataTableSearch * feat(data-table-search): add onClear default * feat(search): add onClear actions to stories * fix(search): adjust test to account for shallow rendering Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: Abbey Hart <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Oct 7, 2021 · 3e0231d · 3e0231d
1 parent 0152e74
commit 3e0231d
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 1 deletion.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1527,6 +1527,7 @@ Map {
     },
     "TableToolbarSearch": Object {
       "defaultProps": Object {
+        "onClear": [Function],
         "persistent": false,
         "tabIndex": "0",
         "translateWithId": [Function],
@@ -1559,6 +1560,9 @@ Map {
         "onChange": Object {
           "type": "func",
         },
+        "onClear": Object {
+          "type": "func",
+        },
         "onExpand": Object {
           "type": "func",
         },
@@ -2157,6 +2161,7 @@ Map {
   },
   "TableToolbarSearch" => Object {
     "defaultProps": Object {
+      "onClear": [Function],
       "persistent": false,
       "tabIndex": "0",
       "translateWithId": [Function],
@@ -2189,6 +2194,9 @@ Map {
       "onChange": Object {
         "type": "func",
       },
+      "onClear": Object {
+        "type": "func",
+      },
       "onExpand": Object {
         "type": "func",
       },
@@ -5314,6 +5322,7 @@ Map {
     "defaultProps": Object {
       "closeButtonLabelText": "Clear search input",
       "onChange": [Function],
+      "onClear": [Function],
       "placeholder": "",
       "type": "text",
     },
@@ -5353,6 +5362,9 @@ Map {
       "onChange": Object {
         "type": "func",
       },
+      "onClear": Object {
+        "type": "func",
+      },
       "onKeyDown": Object {
         "type": "func",
       },
@@ -5484,6 +5496,9 @@ Map {
       "onChange": Object {
         "type": "func",
       },
+      "onClear": Object {
+        "type": "func",
+      },
       "onKeyDown": Object {
         "type": "func",
       },

diff --git a/packages/react/src/components/DataTable/DataTable-story.js b/packages/react/src/components/DataTable/DataTable-story.js
@@ -213,7 +213,10 @@ export const WithToolbar = () => (
         {...getTableContainerProps()}>
         <TableToolbar {...getToolbarProps()} aria-label="data table toolbar">
           <TableToolbarContent>
-            <TableToolbarSearch onChange={onInputChange} />
+            <TableToolbarSearch
+              onChange={onInputChange}
+              onClear={action('onClear')}
+            />
             <TableToolbarMenu light>
               <TableToolbarAction onClick={action('Action 1 Click')}>
                 Action 1

diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.js b/packages/react/src/components/DataTable/TableToolbarSearch.js
@@ -26,6 +26,7 @@ const TableToolbarSearch = ({
   className,
   searchContainerClass,
   onChange: onChangeProp,
+  onClear,
   translateWithId: t,
   placeHolderText,
   placeholder,
@@ -108,6 +109,7 @@ const TableToolbarSearch = ({
         t('carbon.table.toolbar.search.placeholder')
       }
       onChange={onChange}
+      onClear={onClear}
       onFocus={(event) => handleExpand(event, true)}
       onBlur={(event) => !value && handleExpand(event, false)}
       {...rest}
@@ -158,6 +160,11 @@ TableToolbarSearch.propTypes = {
    */
   onChange: PropTypes.func,
 
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear: PropTypes.func,
+
   /**
    * Provide an optional hook that is called each time the input is expanded
    */
@@ -205,6 +212,7 @@ TableToolbarSearch.defaultProps = {
   tabIndex: '0',
   translateWithId,
   persistent: false,
+  onClear: () => {},
 };
 
 export default TableToolbarSearch;
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
@@ -1870,6 +1870,7 @@ exports[`DataTable should render 1`] = `
                 <TableToolbarSearch
                   id="custom-id"
                   onChange={[Function]}
+                  onClear={[Function]}
                   persistent={true}
                   tabIndex="0"
                   translateWithId={[Function]}
@@ -2331,6 +2332,7 @@ exports[`DataTable should render 1`] = `
               <TableToolbarSearch
                 id="custom-id"
                 onChange={[Function]}
+                onClear={[Function]}
                 persistent={true}
                 tabIndex="0"
                 translateWithId={[Function]}
@@ -2342,6 +2344,7 @@ exports[`DataTable should render 1`] = `
                   labelText="Filter table"
                   onBlur={[Function]}
                   onChange={[Function]}
+                  onClear={[Function]}
                   onFocus={[Function]}
                   placeholder="Filter table"
                   tabIndex="0"
@@ -2928,6 +2931,7 @@ exports[`DataTable sticky header should render 1`] = `
                 <TableToolbarSearch
                   id="custom-id"
                   onChange={[Function]}
+                  onClear={[Function]}
                   persistent={true}
                   tabIndex="0"
                   translateWithId={[Function]}
@@ -3392,6 +3396,7 @@ exports[`DataTable sticky header should render 1`] = `
               <TableToolbarSearch
                 id="custom-id"
                 onChange={[Function]}
+                onClear={[Function]}
                 persistent={true}
                 tabIndex="0"
                 translateWithId={[Function]}
@@ -3403,6 +3408,7 @@ exports[`DataTable sticky header should render 1`] = `
                   labelText="Filter table"
                   onBlur={[Function]}
                   onChange={[Function]}
+                  onClear={[Function]}
                   onFocus={[Function]}
                   placeholder="Filter table"
                   tabIndex="0"

diff --git a/...es/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/...es/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
@@ -5,6 +5,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
   className="custom-class"
   id="custom-id"
   onChange={[MockFunction]}
+  onClear={[Function]}
   persistent={false}
   tabIndex="0"
   translateWithId={[Function]}
@@ -16,6 +17,7 @@ exports[`DataTable.TableToolbarSearch should render 1`] = `
     labelText="Filter table"
     onBlur={[Function]}
     onChange={[Function]}
+    onClear={[Function]}
     onFocus={[Function]}
     placeholder="Filter table"
     tabIndex="0"

diff --git a/packages/react/src/components/Search/Search-story.js b/packages/react/src/components/Search/Search-story.js
@@ -46,6 +46,7 @@ const props = () => ({
   placeholder: text('Placeholder text (placeholder)', 'Search'),
   onChange: action('onChange'),
   onKeyDown: action('onKeyDown'),
+  onClear: action('onClear'),
 });
 
 export default {

diff --git a/packages/react/src/components/Search/Search-test.js b/packages/react/src/components/Search/Search-test.js
@@ -182,13 +182,15 @@ describe('Search', () => {
     describe('enabled textinput', () => {
       const onClick = jest.fn();
       const onChange = jest.fn();
+      const onClear = jest.fn();
 
       const wrapper = shallow(
         <Search
           id="test"
           labelText="testlabel"
           onClick={onClick}
           onChange={onChange}
+          onClear={onClear}
         />
       );
 
@@ -208,6 +210,17 @@ describe('Search', () => {
         input.simulate('change', eventObject);
         expect(onChange).toHaveBeenCalledWith(eventObject);
       });
+
+      it('should invoke onClear when input value is cleared', () => {
+        wrapper.setProps({ value: 'test' });
+        const focus = jest.fn();
+        input.getElement().ref({
+          focus,
+        });
+        wrapper.find('button').simulate('click', { target: { value: 'test' } });
+        expect(onClear).toHaveBeenCalled();
+        expect(focus).toHaveBeenCalled();
+      });
     });
   });
 });

diff --git a/packages/react/src/components/Search/Search.js b/packages/react/src/components/Search/Search.js
@@ -59,6 +59,11 @@ export default class Search extends Component {
      */
     onChange: PropTypes.func,
 
+    /**
+     * Optional callback called when the search value is cleared.
+     */
+    onClear: PropTypes.func,
+
     /**
      * Provide a handler that is invoked on the key down event for the input
      */
@@ -120,6 +125,7 @@ export default class Search extends Component {
     placeholder: '',
     closeButtonLabelText: 'Clear search input',
     onChange: () => {},
+    onClear: () => {},
   };
 
   state = {
@@ -150,6 +156,8 @@ export default class Search extends Component {
       this.props.onChange(clearedEvt);
     }
 
+    this.props.onClear();
+
     this.setState({ hasContent: false }, () => this.input.focus());
   };
 
@@ -183,6 +191,7 @@ export default class Search extends Component {
       onChange,
       onKeyDown,
       renderIcon,
+      onClear, // eslint-disable-line no-unused-vars
       ...other
     } = this.props;