Changes made as per PR feedback

Author: anandBalachandar

vuu-ui/packages/vuu-filters/src/filter-clause/useFilterClause.ts

@@ -53,10 +53,6 @@ export const useFilterClause = ({
   const valueRef = useRef<HTMLDivElement | null>(null);
   const filterTouched = useRef(false);
 
-  const setTouched = useCallback(() => {
-    if (!filterTouched.current) filterTouched.current = true;
-  }, []);
-
   const setValueRef = useCallback<RefCallback<HTMLDivElement>>(
     (el) => {
       valueRef.current = el;
@@ -193,9 +189,9 @@ export const useFilterClause = ({
     () => ({
       onKeyDownCapture: handleKeyDownCaptureNavigation,
       tabIndex: -1,
-      onFocus: () => setTouched(),
+      onFocus: () => filterTouched.current = true,
     }),
-    [handleKeyDownCaptureNavigation, setTouched],
+    [handleKeyDownCaptureNavigation],
   );
 
   // Do we need this or can we leave it to the filterEditor
@@ -214,7 +210,7 @@ export const useFilterClause = ({
         inputRef.current?.querySelector("input")?.focus();
       });
     }
-  }, [filterClauseModel, setTouched]);
+  }, [filterClauseModel]);
 
   return {
     inputProps,

vuu-ui/showcase/src/examples/DataTable/Tree.data.ts

@@ -578,6 +578,16 @@ export default [
                   path: "src/examples/Filters/FilterClause/FilterClause.examples.tsx",
                 },
               },
+              {
+                id: "Filters/FilterClause/FilterClause/MultipleFilterClauseControlsWithDropDownAutofocusDisabled",
+                label:
+                  "MultipleFilterClauseControlsWithDropDownAutofocusDisabled",
+                nodeData: {
+                  componentName:
+                    "MultipleFilterClauseControlsWithDropDownAutofocusDisabled",
+                  path: "src/examples/Filters/FilterClause/FilterClause.examples.tsx",
+                },
+              },
               {
                 id: "Filters/FilterClause/FilterClause/NewFilterClause",
                 label: "NewFilterClause",
@@ -621,18 +631,15 @@ export default [
               },
               {
                 id: "Filters/FilterClause/FilterClause/FilterColumnWithDropdownOpenOnFocusDisabled",
-                label:
-                  "FilterColumnWithDropdownOpenOnFocusDisabled",
+                label: "FilterColumnWithDropdownOpenOnFocusDisabled",
                 nodeData: {
-                  componentName:
-                    "FilterColumnWithDropdownOpenOnFocusDisabled",
+                  componentName: "FilterColumnWithDropdownOpenOnFocusDisabled",
                   path: "src/examples/Filters/FilterClause/FilterClause.examples.tsx",
                 },
               },
               {
                 id: "Filters/FilterClause/FilterClause/FilterColumnAndOperatorWithDropdownOpenOnFocusDisabled",
-                label:
-                  "FilterColumnAndOperatorWithDropdownOpenOnFocusDisabled",
+                label: "FilterColumnAndOperatorWithDropdownOpenOnFocusDisabled",
                 nodeData: {
                   componentName:
                     "FilterColumnAndOperatorWithDropdownOpenOnFocusDisabled",