From e97a7ed9be2911707066c406544310f6cb76f273 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Fri, 24 Jan 2020 14:10:08 -0800
Subject: [PATCH] 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
---
 .../src/components/DataTable/DataTable.js     |  6 +++-
 .../DataTable/TableToolbarSearch.js           | 33 +++++++++++++++----
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/components/DataTable/DataTable.js b/packages/react/src/components/DataTable/DataTable.js
index 93fe34c128c4..12223ba7afd5 100644
--- 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
index beeba0ef142d..ba735e9f8baa 100644
--- 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,7 +103,7 @@ 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}>
@@ -91,7 +111,6 @@ const TableToolbarSearch = ({
         size="sm"
         tabIndex={expandedState ? tabIndex : '-1'}
         className={className}
-        defaultValue={defaultValue}
         value={value}
         id={typeof id !== 'undefined' ? id : uniqueId.toString()}
         aria-hidden={!expanded}