Merge pull request #730 from vrk-kpa/fix/dropdown-selected-item-parsing

[Fix]: Dropdown selected item parsing
vrk-kpa · May 26, 2023 · 5e17750 · 5e17750
2 parents bae7451 + e84699f
commit 5e17750
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "suomifi-ui-components",
-  "version": "10.0.2",
+  "version": "10.0.3",
   "description": "Suomi.fi UI component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

diff --git a/src/core/Dropdown/Dropdown/Dropdown.tsx b/src/core/Dropdown/Dropdown/Dropdown.tsx
@@ -12,7 +12,6 @@ import { SuomifiThemeProp, SuomifiThemeConsumer } from '../../theme';
 import {
   forkRefs,
   getOwnerDocument,
-  getRecursiveChildText,
   HTMLAttributesIncludingDataAttributes,
 } from '../../../utils/common/common';
 import { Popover } from '../../../core/Popover/Popover';
@@ -77,7 +76,7 @@ const { Provider: DropdownProvider, Consumer: DropdownConsumer } =
 
 interface DropdownState {
   selectedValue: string | undefined | null;
-  selectedValueText: string | undefined | null;
+  selectedValueNode: ReactNode | undefined | null;
   ariaExpanded: boolean;
   showPopover: boolean;
   focusedDescendantId: string | null | undefined;
@@ -168,7 +167,7 @@ class BaseDropdown extends Component<DropdownProps> {
         : 'defaultValue' in this.props
         ? this.props.defaultValue
         : undefined,
-    selectedValueText: BaseDropdown.parseSelectedValueText(
+    selectedValueNode: BaseDropdown.getSelectedValueNode(
       'value' in this.props
         ? this.props.value
         : 'defaultValue' in this.props
@@ -207,7 +206,7 @@ class BaseDropdown extends Component<DropdownProps> {
     if ('value' in nextProps && value !== prevState.selectedValue) {
       return {
         selectedValue: value,
-        selectedValueText: BaseDropdown.parseSelectedValueText(
+        selectedValueNode: BaseDropdown.getSelectedValueNode(
           value,
           nextProps.children,
         ),
@@ -216,24 +215,24 @@ class BaseDropdown extends Component<DropdownProps> {
     return null;
   }
 
-  static parseSelectedValueText(
+  static getSelectedValueNode(
     selectedValue: string | undefined,
     children:
       | Array<ReactElement<DropdownItemProps>>
       | ReactElement<DropdownItemProps>
       | undefined,
-  ): string | undefined {
+  ): ReactNode | undefined {
     if (selectedValue === undefined || children === undefined) return undefined;
 
     if (Array.isArray(children)) {
       for (let index = 0; index < children.length; index += 1) {
         const element = children[index];
         if (element.props.value === selectedValue) {
-          return getRecursiveChildText(element);
+          return element.props.children;
         }
       }
     } else {
-      return getRecursiveChildText(children);
+      return children.props.children;
     }
   }
 
@@ -258,7 +257,7 @@ class BaseDropdown extends Component<DropdownProps> {
     }
     this.setState({
       selectedValue: itemValue,
-      selectedValueText: BaseDropdown.parseSelectedValueText(
+      selectedValueNode: BaseDropdown.getSelectedValueNode(
         itemValue,
         this.props.children,
       ),
@@ -429,7 +428,7 @@ class BaseDropdown extends Component<DropdownProps> {
     if (this.props.alwaysShowVisualPlaceholder) {
       return this.props.visualPlaceholder;
     }
-    return this.state.selectedValueText ?? this.props.visualPlaceholder;
+    return this.state.selectedValueNode ?? this.props.visualPlaceholder;
   }
 
   private focusToButtonAndClosePopover() {

diff --git a/src/utils/common/common.ts b/src/utils/common/common.ts
@@ -1,4 +1,4 @@
-import React, { MutableRefObject, ReactElement, Ref } from 'react';
+import React, { MutableRefObject, Ref } from 'react';
 import { getLogger } from '../../utils/log';
 
 export function windowAvailable() {
@@ -47,34 +47,6 @@ export const forkRefs =
     });
   };
 
-export const getRecursiveChildText = (reactNode: ReactElement): any => {
-  const children = reactNode.props?.children || undefined;
-  if (Array.isArray(reactNode)) {
-    // Multiple children
-    const joinedNodes: Array<ReactElement | string> = [];
-    reactNode.forEach((node) => {
-      if (typeof node === 'object') {
-        joinedNodes.push(getRecursiveChildText(node));
-      } else if (typeof node === 'string') {
-        joinedNodes.push(node);
-      }
-    });
-    return joinedNodes.join(' ');
-  }
-  if (children === undefined) {
-    if (typeof reactNode === 'string') return reactNode;
-    return '';
-  }
-  if (typeof children === 'object') {
-    // Found direct child
-    return getRecursiveChildText(children);
-  }
-  if (typeof children === 'string' || typeof children === 'number') {
-    // Found searchable string
-    return children;
-  }
-};
-
 /**
  * The following interface allows data-* attributes.
  * The basic React.HTMLAttributes interface throws errors when trying to do something like