fix(TableToolbarSearch): allow default values to be set (#5089)

* fix(TableToolbarSearch): allow default values to be set * fix(TableToolbarSearch): sort on load when default value is present * fix(TableToolbarSearch): only run effect once * fix(TableToolbarSearch): refactor defaultExpanded * fix(datatable): refactor focus management
carbon-design-system · Jan 24, 2020 · e97a7ed · e97a7ed
1 parent 88fd0af
commit e97a7ed
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 8 deletions.
diff --git a/packages/react/src/components/DataTable/DataTable.js b/packages/react/src/components/DataTable/DataTable.js
@@ -581,10 +581,14 @@ export default class DataTable extends React.Component {
    *
    * @param {Event} event
    */
-  handleOnInputValueChange = event => {
+  handleOnInputValueChange = (event, defaultValue) => {
     if (event.target) {
       this.setState({ filterInputValue: event.target.value });
     }
+
+    if (defaultValue) {
+      this.setState({ filterInputValue: defaultValue });
+    }
   };
 
   render() {

diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.js b/packages/react/src/components/DataTable/TableToolbarSearch.js
@@ -40,17 +40,32 @@ const TableToolbarSearch = ({
   ...rest
 }) => {
   const { current: controlled } = useRef(expandedProp !== undefined);
-  const [expandedState, setExpandedState] = useState(defaultExpanded);
+  const [expandedState, setExpandedState] = useState(
+    defaultExpanded || defaultValue
+  );
   const expanded = controlled ? expandedProp : expandedState;
   const searchRef = useRef(null);
-  const [value, setValue] = useState('');
+  const [value, setValue] = useState(defaultValue || '');
   const uniqueId = useMemo(getInstanceId, []);
 
+  const [focusTarget, setFocusTarget] = useState(null);
+
   useEffect(() => {
-    if (!controlled && expandedState && searchRef.current) {
-      searchRef.current.querySelector('input').focus();
+    if (focusTarget) {
+      focusTarget.current.querySelector('input').focus();
+      setFocusTarget(null);
     }
-  }, [controlled, expandedState]);
+  }, [focusTarget]);
+
+  useEffect(
+    () => {
+      if (defaultValue) {
+        onChangeProp('', defaultValue);
+      }
+    },
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
 
   const searchContainerClasses = cx({
     [searchContainerClass]: searchContainerClass,
@@ -71,6 +86,11 @@ const TableToolbarSearch = ({
     }
   };
 
+  const onClick = e => {
+    setFocusTarget(searchRef);
+    handleExpand(e, true);
+  };
+
   const onChange = e => {
     setValue(e.target.value);
     if (onChangeProp) {
@@ -83,15 +103,14 @@ const TableToolbarSearch = ({
       tabIndex={expandedState ? '-1' : tabIndex}
       role="search"
       ref={searchRef}
-      onClick={event => handleExpand(event, true)}
+      onClick={event => onClick(event)}
       onFocus={event => handleExpand(event, true)}
       onBlur={event => !value && handleExpand(event, false)}
       className={searchContainerClasses}>
       <Search
         size="sm"
         tabIndex={expandedState ? tabIndex : '-1'}
         className={className}
-        defaultValue={defaultValue}
         value={value}
         id={typeof id !== 'undefined' ? id : uniqueId.toString()}
         aria-hidden={!expanded}