feat(complexfilter): add shouldisTriggerChangeOnOptionClick to comple…

…xFilter and (#772) Fix FilterTag close button styles + adding autoFocus to the Autocomplete input search by default
chanzuckerberg · May 9, 2024 · 038ad54 · 038ad54
1 parent 8331f9a
commit 038ad54
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 43 deletions.
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx
@@ -290,7 +290,12 @@ const AutocompleteMultiColumn = <
                   }
                   multiple={multiple}
                   label={label}
-                  InputBaseProps={InputBaseProps}
+                  /**
+                   * (masoudmanson): In a multi-column autocomplete, the search input for
+                   * inner autocompletes should remain hidden and unfocused when the parent
+                   * input is focused. This prevents blurring of the main search input.
+                   */
+                  InputBaseProps={{ ...InputBaseProps, autoFocus: false }}
                   popperOpen={popperOpen}
                   inputValue={inputValue}
                   PaperComponent={StyledPaper}

diff --git a/packages/components/src/core/ComplexFilter/__storybook__/index.stories.tsx b/packages/components/src/core/ComplexFilter/__storybook__/index.stories.tsx
@@ -9,6 +9,11 @@ import { TestDemo } from "./stories/test";
 
 export default {
   argTypes: {
+    isTriggerChangeOnOptionClick: {
+      control: {
+        type: "boolean",
+      },
+    },
     label: {
       control: {
         type: "text",
@@ -44,6 +49,7 @@ export default {
 
 export const Default = {
   args: {
+    isTriggerChangeOnOptionClick: false,
     label: "Click Target",
     multiple: true,
     onChange: COMPLEX_FILTER_ON_CHANGE_OPTIONS[1],

diff --git a/packages/components/src/core/ComplexFilter/__storybook__/stories/default.tsx b/packages/components/src/core/ComplexFilter/__storybook__/stories/default.tsx
@@ -15,6 +15,7 @@ export const ComplexFilter = <T extends DefaultAutocompleteOption>(
       DropdownMenuProps={{
         groupBy: (option: DefaultAutocompleteOption) =>
           option.section as string,
+        width: 400,
       }}
       {...props}
     />

diff --git a/packages/components/src/core/ComplexFilter/components/Chips/index.tsx b/packages/components/src/core/ComplexFilter/components/Chips/index.tsx
@@ -1,23 +1,40 @@
+import { AutocompleteValue } from "@mui/base";
 import { DefaultAutocompleteOption } from "src/core/Autocomplete/components/AutocompleteBase";
 import TagFilter from "src/core/TagFilter";
 
-interface Props {
-  value: DefaultAutocompleteOption | DefaultAutocompleteOption[] | null;
+interface Props<
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined,
+> {
+  value: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>;
   multiple?: boolean;
   onDelete: (option: DefaultAutocompleteOption) => void;
 }
 
-const Chips = ({
+const Chips = <
+  T extends DefaultAutocompleteOption,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined,
+>({
   value,
   multiple = false,
   onDelete,
-}: Props): JSX.Element | null => {
+}: Props<T, Multiple, DisableClearable, FreeSolo>): JSX.Element | null => {
   if (!value) return null;
 
   if (!multiple) {
     const { name } = value as never;
 
-    return <TagFilter label={name} onDelete={onDelete} />;
+    return (
+      <TagFilter
+        label={name}
+        onDelete={onDelete}
+        onClick={() => onDelete(name)}
+      />
+    );
   }
 
   return (
@@ -26,7 +43,12 @@ const Chips = ({
         const { name } = item;
 
         return (
-          <TagFilter key={name} label={name} onDelete={() => onDelete(item)} />
+          <TagFilter
+            key={name}
+            label={name}
+            onDelete={() => onDelete(item)}
+            onClick={() => onDelete(item)}
+          />
         );
       })}
     </>

diff --git a/packages/components/src/core/ComplexFilter/index.tsx b/packages/components/src/core/ComplexFilter/index.tsx
@@ -36,6 +36,7 @@ export interface ComplexFilterProps<
   className?: string;
   PopperComponent?: typeof StyledPopper;
   InputDropdownComponent?: typeof InputDropdown;
+  isTriggerChangeOnOptionClick?: boolean;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -55,6 +56,7 @@ const ComplexFilter = <
   value: propValue,
   PopperComponent,
   InputDropdownComponent = InputDropdown,
+  isTriggerChangeOnOptionClick = false,
   ...rest
 }: ComplexFilterProps<
   T,
@@ -67,16 +69,13 @@ const ComplexFilter = <
   const [open, setOpen] = useState(false);
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
-  const [value, setValue] = useState<
-    AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
-  >(
-    (multiple ? [] : null) as AutocompleteValue<
-      T,
-      Multiple,
-      DisableClearable,
-      FreeSolo
-    >
-  );
+  const [value, setValue] = useState(getInitialValue());
+  const [pendingValue, setPendingValue] = useState(getInitialValue());
+
+  useEffect(() => {
+    onChange(value);
+    setPendingValue(value);
+  }, [onChange, value]);
 
   useEffect(() => {
     if (isControlled) {
@@ -98,13 +97,8 @@ const ComplexFilter = <
         />
 
         <StyledChipsWrapper>
-          <Chips
-            value={
-              value as
-                | DefaultAutocompleteOption
-                | DefaultAutocompleteOption[]
-                | null
-            }
+          <Chips<T, Multiple, DisableClearable, FreeSolo>
+            value={value}
             multiple={multiple}
             onDelete={handleDelete}
           />
@@ -117,7 +111,7 @@ const ComplexFilter = <
         onClose={handleMenuSelectClose}
         search={search}
         multiple={multiple as Multiple}
-        value={value}
+        value={multiple ? pendingValue : value}
         onChange={handleChange}
         disableCloseOnSelect={multiple}
         options={options}
@@ -132,6 +126,10 @@ const ComplexFilter = <
 
   function handleClick(event: React.MouseEvent<HTMLElement>) {
     if (open) {
+      if (multiple) {
+        setValue(pendingValue);
+      }
+
       setOpen(false);
 
       if (anchorEl) {
@@ -140,6 +138,10 @@ const ComplexFilter = <
 
       setAnchorEl(null);
     } else {
+      if (multiple) {
+        setPendingValue(value);
+      }
+
       setAnchorEl(event.currentTarget);
       setOpen(true);
     }
@@ -148,6 +150,10 @@ const ComplexFilter = <
   function handleClose() {
     if (open) {
       setOpen(false);
+
+      if (multiple) {
+        setValue(pendingValue);
+      }
     }
   }
 
@@ -163,14 +169,30 @@ const ComplexFilter = <
   }
 
   function handleChange(
-    event: React.ChangeEvent<unknown>,
+    event: React.SyntheticEvent,
+    newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
+  ) {
+    if (multiple) {
+      if (isTriggerChangeOnOptionClick) {
+        setPendingValue(newValue);
+
+        return setValueAndCallOnChange(event, newValue);
+      }
+
+      return setPendingValue(newValue);
+    }
+
+    setValueAndCallOnChange(event, newValue);
+
+    if (!multiple) setOpen(false);
+  }
+
+  function setValueAndCallOnChange(
+    event: React.SyntheticEvent,
     newValue: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
   ) {
     setValue(newValue);
     onChange?.(newValue);
-    if (!multiple) {
-      setOpen(false);
-    }
   }
 
   function handleDelete(option: DefaultAutocompleteOption) {
@@ -186,6 +208,22 @@ const ComplexFilter = <
       newValue as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>
     );
   }
+
+  function getInitialValue(): AutocompleteValue<
+    T,
+    Multiple,
+    DisableClearable,
+    FreeSolo
+  > {
+    return multiple
+      ? ([] as unknown as AutocompleteValue<
+          T,
+          Multiple,
+          DisableClearable,
+          FreeSolo
+        >)
+      : (null as AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>);
+  }
 };
 
 export default ComplexFilter;
diff --git a/packages/components/src/core/DropdownMenu/index.tsx b/packages/components/src/core/DropdownMenu/index.tsx
@@ -126,6 +126,7 @@ const DropdownMenu = <
   const DefaultInputBaseProps = useMemo(() => {
     return {
       ...InputBaseProps,
+      autoFocus: true,
       onClick: noop,
     };
   }, [InputBaseProps]);

diff --git a/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap
@@ -123,7 +123,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
             />
           </div>
           <div
-            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
+            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-elc81v-MuiChip-root"
           >
             <span
               class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -195,7 +195,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         class="cell-component css-4umyx6"
       >
         <div
-          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
+          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-elc81v-MuiChip-root"
         >
           <span
             class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -204,7 +204,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           </span>
         </div>
         <div
-          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
+          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-elc81v-MuiChip-root"
         >
           <span
             class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -213,7 +213,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           </span>
         </div>
         <div
-          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
+          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-elc81v-MuiChip-root"
         >
           <span
             class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -222,7 +222,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           </span>
         </div>
         <div
-          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
+          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-elc81v-MuiChip-root"
         >
           <span
             class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -231,7 +231,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           </span>
         </div>
         <div
-          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
+          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-elc81v-MuiChip-root"
         >
           <span
             class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -287,7 +287,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
             />
           </div>
           <div
-            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
+            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-elc81v-MuiChip-root"
           >
             <span
               class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -518,7 +518,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
             />
           </div>
           <div
-            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
+            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-elc81v-MuiChip-root"
           >
             <span
               class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"

diff --git a/packages/components/src/core/Tag/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Tag/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Tag /> Default story renders snapshot 1`] = `
 <div
-  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-9gm3k1-MuiChip-root"
+  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1rxt7c5-MuiChip-root"
 >
   <span
     class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"

diff --git a/packages/components/src/core/Tag/style.ts b/packages/components/src/core/Tag/style.ts
@@ -59,8 +59,7 @@ const tagSizeS = (props: ExtraTagProps): SerializedStyles => {
     .MuiSvgIcon-root {
       height: ${iconSizes?.xs.height}px;
       width: ${iconSizes?.xs.width}px;
-      padding-right: ${spaces?.xxs}px;
-      margin: 0 0 0 -${spaces?.xxxs}px;
+      margin: 0 ${spaces?.xxs}px 0 -${spaces?.xxxs}px;
     }
 
     .MuiChip-deleteIcon {
@@ -89,8 +88,7 @@ const tagSizeL = (props: ExtraTagProps): SerializedStyles => {
     .MuiSvgIcon-root {
       height: ${iconSizes?.l.height}px;
       width: ${iconSizes?.l.width}px;
-      padding-right: ${spaces?.xxs}px;
-      margin: 0 0 0 -${spaces?.xxxs}px;
+      margin: 0 ${spaces?.xxs}px 0 -${spaces?.xxxs}px;
     }
 
     .MuiChip-deleteIcon {

diff --git a/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`<TagFilter /> Default story renders snapshot 1`] = `
   </div>
   <div>
     <div
-      class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-deletable MuiChip-deletableColorPrimary MuiChip-filledPrimary css-18fqwks-MuiButtonBase-root-MuiChip-root"
+      class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-deletable MuiChip-deletableColorPrimary MuiChip-filledPrimary css-1mejrok-MuiButtonBase-root-MuiChip-root"
       role="none presentation"
       tabindex="0"
     >