Fix groups example

cee-chen · cee-chen · commit f3d4e57a82ea · 2024-04-07T11:53:03.000-07:00
- remove a ton of now-unnecessary lowercase normalization checks that EuiComboBox handles automatically

- had a `custom` undefined error on every new custom creation that was due to too many `setAllOptions` calls - use a callback and an `=` destructure fallback to fix all those things
diff --git a/src-docs/src/views/combo_box/groups.js b/src-docs/src/views/combo_box/groups.js
@@ -38,10 +38,8 @@ const soundGroup = {
   ],
 };
 
-const allOptionsStatic = [colorGroup, soundGroup];
-
 export default () => {
-  const [allOptions, setAllOptions] = useState(allOptionsStatic);
+  const [allOptions, setAllOptions] = useState([colorGroup, soundGroup]);
   const [selectedOptions, setSelected] = useState([
     colorGroup.options[2],
     soundGroup.options[3],
@@ -51,54 +49,31 @@ export default () => {
     setSelected(selectedOptions);
   };
 
-  const onCreateOption = (searchValue, flattenedOptions = []) => {
-    if (!searchValue) {
-      return;
-    }
-
-    const normalizedSearchValue = searchValue.trim().toLowerCase();
-
-    if (!normalizedSearchValue) {
-      return;
-    }
-
+  const onCreateOption = (searchValue) => {
     const newOption = {
       label: searchValue,
     };
 
-    // Create the option if it doesn't exist.
-    if (
-      flattenedOptions.findIndex(
-        (option) => option.label.trim().toLowerCase() === normalizedSearchValue
-      ) === -1
-    ) {
-      if (allOptions[allOptions.length - 1].label !== 'Custom') {
-        setAllOptions([
-          ...allOptions,
-          {
-            label: 'Custom',
-            options: [],
-          },
-        ]);
-      }
-      const [colors, sounds, custom] = allOptions;
-      setAllOptions([
+    setAllOptions((allOptions) => {
+      const [colors, sounds, custom = { label: 'Custom', options: [] }] =
+        allOptions;
+      return [
         colors,
         sounds,
         {
           ...custom,
           options: [...custom.options, newOption],
         },
-      ]);
-    }
+      ];
+    });
 
     // Select the option.
     setSelected([...selectedOptions, newOption]);
   };
 
   return (
     <EuiComboBox
-      aria-label="Accessible screen reader label"
+      aria-label="EuiComboBox example with groups"
       placeholder="These options are grouped"
       options={allOptions}
       selectedOptions={selectedOptions}
