(Picklist): execute extractTextContent() inside extractTextContent()

Author: msmx-mnakagawa

src/scripts/Picklist.tsx

@@ -67,7 +67,7 @@ function collectOptionValues(children: unknown): PicklistValue[] {
 function findSelectedItemLabel(
   children: unknown,
   selectedValue: PicklistValue
-): React.ReactNode | null {
+): string | number | null {
   return (
     React.Children.map(children, (child) => {
       if (!React.isValidElement(child)) {
@@ -107,21 +107,56 @@ function findSelectedItemLabel(
         typeof label === 'string' ||
         typeof label === 'number' ||
         React.isValidElement(label)
-          ? label
+          ? extractTextContent(label)
           : undefined;
       const childrenValue =
         typeof itemChildren === 'string' ||
         typeof itemChildren === 'number' ||
         React.isValidElement(itemChildren) ||
         Array.isArray(itemChildren)
-          ? itemChildren
+          ? extractTextContent(itemChildren)
           : undefined;
 
       return labelValue || childrenValue;
     }).find((result) => result !== null) ?? null
   );
 }
 
+/**
+ * Extract text content from React node recursively
+ */
+function extractTextContent(node: unknown): string | number | null {
+  if (node == null) {
+    return null;
+  }
+
+  if (typeof node === 'string' || typeof node === 'number') {
+    return node;
+  }
+
+  if (typeof node === 'boolean') {
+    return String(node);
+  }
+
+  if (Array.isArray(node)) {
+    return node
+      .map(extractTextContent)
+      .filter((result) => result !== null)
+      .join('');
+  }
+
+  if (
+    React.isValidElement(node) &&
+    node.props &&
+    typeof node.props === 'object' &&
+    'children' in node.props
+  ) {
+    return extractTextContent(node.props.children);
+  }
+
+  return null;
+}
+
 /**
  *
  */