MDS-737 When Multiselect Input expands Menu is not aligned properly (#…

…2469) * fix: when Multiselect Input expands Menu is not aligned properly * fix: the delay value has been increased * fix: the Tracking prop has changed from boolean to number type * use forceUpdate * bump snapshots
coingaming · Nov 9, 2023 · 43a8683 · 43a8683
1 parent 14a1c7d
commit 43a8683
Show file tree

Hide file tree

Showing 5 changed files with 470 additions and 190 deletions.
diff --git a/next-docs/pages/components/combobox.tsx b/next-docs/pages/components/combobox.tsx
@@ -582,6 +582,19 @@ const PageCombobox = () => {
         ]}
       />
 
+      <PropsTable
+        title="Combobox.VisualMultiSelect"
+        data={[
+          {
+            name: 'forceUpdate',
+            type: 'boolean',
+            required: false,
+            default: '-',
+            description: 'If you need to align the list of options properly on each select/deselect set the "boolean" property.',
+          },
+        ]}
+      />
+
       <PropsTable
         title="Combobox.Counter"
         data={[

diff --git a/next-docs/public/examples/combobox/VisualMultiSelect.tsx b/next-docs/public/examples/combobox/VisualMultiSelect.tsx
@@ -26,42 +26,94 @@ const filter = (
 };
 
 const Example = () => {
-  const [selected, setSelected] = useState([]);
-  const [query, setQuery] = useState<string>('');
+  const [selected1, setSelected1] = useState([]);
+  const [selected2, setSelected2] = useState([]);
+  const [query1, setQuery1] = useState<string>('');
+  const [query2, setQuery2] = useState<string>('');
 
-  const filteredPeople = filter(query, people);
+  const filteredPeople1 = filter(query1, people);
+  const filteredPeople2 = filter(query2, people);
 
-  const onRemoveItem = useCallback((index: unknown) => {
-    setSelected(selected.filter(({ id }) => id !== index));
-  }, [selected]);
+  const onRemoveItem1 = useCallback((index: unknown) => {
+    setSelected1(selected1.filter(({ id }) => id !== index));
+  }, [selected1]);
+
+  const onRemoveItem2 = useCallback((index: unknown) => {
+    setSelected2(selected2.filter(({ id }) => id !== index));
+  }, [selected2]);
 
   return (
-    <div className="flex w-full max-w-xs items-center">
+    <div className="flex flex-col lg:flex-row lg:justify-center items-center w-full gap-4">
+      <Combobox
+        value={selected1}
+        onChange={setSelected1}
+        onQueryChange={setQuery1}
+        onClear={onRemoveItem1}
+        className="w-full max-w-xs"
+        multiple
+      >
+        {({ open }) => (
+          <>
+            <Combobox.VisualMultiSelect
+              open={open}
+              label=""
+              placeholder="Choose an option"
+              displayValue={({ label }) => label}
+            >
+              <ControlsChevronDownSmall />
+            </Combobox.VisualMultiSelect>
+            <Combobox.Transition>
+              <Combobox.Options>
+                {filteredPeople1.length === 0 && query1 !== '' ? (
+                  <div className="relative cursor-default select-none py-2 px-4 text-trunks">
+                    Nothing found.
+                  </div>
+                ) : (
+                  filteredPeople1.map((person, index) => (
+                    <Combobox.Option value={person} key={index}>
+                      {({ selected, active }) => (
+                        <MenuItem isActive={active} isSelected={selected}>
+                          <MenuItem.Title>{person.label}</MenuItem.Title>
+                          <MenuItem.Checkbox isSelected={selected} />
+                        </MenuItem>
+                      )}
+                    </Combobox.Option>
+                  ))
+                )}
+              </Combobox.Options>
+            </Combobox.Transition>
+            <Combobox.Hint>Without tracking the state of the input field</Combobox.Hint>
+          </>
+        )}
+      </Combobox>
+
       <Combobox
-        value={selected}
-        onChange={setSelected}
-        onQueryChange={setQuery}
-        onClear={onRemoveItem}
+        value={selected2}
+        onChange={setSelected2}
+        onQueryChange={setQuery2}
+        onClear={onRemoveItem2}
+        className="w-full max-w-xs"
         multiple
       >
         {({ open }) => (
           <>
             <Combobox.VisualMultiSelect
               open={open}
-              label="Select label"
+              label=""
               placeholder="Choose an option"
               displayValue={({ label }) => label}
+              forceUpdate
             >
               <ControlsChevronDownSmall />
             </Combobox.VisualMultiSelect>
             <Combobox.Transition>
               <Combobox.Options>
-                {filteredPeople.length === 0 && query !== '' ? (
+                {filteredPeople2.length === 0 && query2 !== '' ? (
                   <div className="relative cursor-default select-none py-2 px-4 text-trunks">
                     Nothing found.
                   </div>
                 ) : (
-                  filteredPeople.map((person, index) => (
+                  filteredPeople2.map((person, index) => (
                     <Combobox.Option value={person} key={index}>
                       {({ selected, active }) => (
                         <MenuItem isActive={active} isSelected={selected}>
@@ -74,7 +126,7 @@ const Example = () => {
                 )}
               </Combobox.Options>
             </Combobox.Transition>
-            <Combobox.Hint>Informative message holder</Combobox.Hint>
+            <Combobox.Hint>When the state of the input field changes, use `forceUpdate`.</Combobox.Hint>
           </>
         )}
       </Combobox>