Merge pull request #130 from kevingyang/master

feat: support grouped options with CreatableSelect (fixes flattenGroupedChildren)
jacobworrel · Jan 28, 2024 · 769d13a · 769d13a
2 parents 328f69f + 6cf5638
commit 769d13a
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/src/util.ts b/src/util.ts
@@ -10,23 +10,17 @@ export function calcOptionsLength (options) {
     : options.length;
 }
 
-export function flattenGroupedChildren (children) {
+export function flattenGroupedChildren(children) {
   return children.reduce((result, child) => {
-    const {
-      props: {
-        children: nestedChildren = [],
-      },
-    } = child;
+    if (child.props.children != null && typeof child.props.children === "string") {
+      return [...result, child];
+    } else {
+      const {
+        props: { children: nestedChildren = [] },
+      } = child;
 
-    return [
-      ...result,
-      React.cloneElement(
-        child,
-        { type: 'group' },
-        []
-      ),
-      ...nestedChildren,
-    ];
+      return [...result, React.cloneElement(child, { type: "group" }, []), ...nestedChildren];
+    }
   }, []);
 }
 

diff --git a/stories/CreatableSelect.stories.js b/stories/CreatableSelect.stories.js
@@ -5,7 +5,7 @@ import CreatableSelect from 'react-select/creatable';
 
 import { WindowedMenuList } from '../src';
 
-import { options200 } from './storyUtil';
+import { groupedOptions, options200 } from './storyUtil';
 
 storiesOf('Creatable Select', module)
     .add('default', () => (
@@ -26,4 +26,23 @@ storiesOf('Creatable Select', module)
                 console.groupEnd();
             }}
         />
-    ));
+    )).add('grouped', () => (
+        <CreatableSelect
+            // menuIsOpen
+            options={groupedOptions}
+            components={{ MenuList: WindowedMenuList }}
+            onChange={(newValue, actionMeta) => {
+                console.group('Value Changed');
+                console.log(newValue);
+                console.log(`action: ${actionMeta.action}`);
+                console.groupEnd();
+            }}
+            onInputChange={(inputValue, actionMeta) => {
+                console.group('Input Changed');
+                console.log(inputValue);
+                console.log(`action: ${actionMeta.action}`);
+                console.groupEnd();
+            }}
+        />
+      ))
+