Merge pull request #34 from abusix/pla-632-clear-input-when-adding-a-tag

fix(docs): added more realisitc reset example for custom values
abusix · Sep 7, 2023 · 07ad6d8 · 07ad6d8
2 parents e4c0c88 + 9cba917
commit 07ad6d8
Showing 1 changed file with 14 additions and 7 deletions.
diff --git a/src/components/form-field/multi-combobox/multi-combobox.stories.tsx b/src/components/form-field/multi-combobox/multi-combobox.stories.tsx
@@ -216,11 +216,21 @@ const MultiComboboxTagWithHooks = () => {
 const MultiComboboxCustomValueWithHooks = () => {
     const [selectedPersons, setSelectedPersons] = React.useState<string[]>([]);
     const [query, setQuery] = React.useState("");
+    const [peopleCopy, setPeopleCopy] = React.useState(people);
+
+    const handleSelectedPeopleChange = (value: string[]) => {
+        const uniqueCustomValue = value.filter((valueItem) => {
+            return peopleCopy.indexOf(valueItem) === -1;
+        });
+        setQuery("");
+        setPeopleCopy([...uniqueCustomValue, ...peopleCopy]);
+        setSelectedPersons(value);
+    };
 
     const filteredPeople =
         query === ""
-            ? people
-            : people.filter((person) => {
+            ? peopleCopy
+            : peopleCopy.filter((person) => {
                   return person.toLowerCase().includes(query.toLowerCase());
               });
 
@@ -230,18 +240,15 @@ const MultiComboboxCustomValueWithHooks = () => {
                 <FormField.Label htmlFor="value">Label</FormField.Label>
                 <FormField.Description id="value-description">Description</FormField.Description>
             </FormField.LabelGroup>
-            <FormField.MultiCombobox
-                value={selectedPersons}
-                onChange={(value) => setSelectedPersons(value)}
-            >
+            <FormField.MultiCombobox value={selectedPersons} onChange={handleSelectedPeopleChange}>
                 <FormField.MultiCombobox.Input
                     id="value"
                     displayValue={query}
                     placeholder="Select person..."
                     onChange={(event) => setQuery(event.target.value)}
                 />
                 <FormField.MultiCombobox.Options>
-                    {query.length > 0 && people.indexOf(query) === -1 && (
+                    {query.length > 0 && peopleCopy.indexOf(query) === -1 && (
                         <FormField.MultiCombobox.CustomOption value={query}>
                             Create tag: <Tag>{query}</Tag>
                         </FormField.MultiCombobox.CustomOption>