fix(Field.Selection): add support for numeric values

dnbexperience · Sep 22, 2023 · d4408db · d4408db
1 parent b6576d6
commit d4408db
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/CountryCode.tsx
@@ -39,27 +39,27 @@ function CountryCode(props: Props) {
   const autocompleteData = useMemo(
     () =>
       countries.map((country) => ({
-        selected_key: `+${country.code}`,
+        selectedKey: `+${country.code}`,
         selected_value: `${country.iso} (+${country.code})`,
         content: `+${country.code} ${country.name}`,
       })),
     []
   )
 
   const forwardHandleChange = useCallback(
-    ({ data: changedData }: { data: { selected_key: string } }) => {
-      if (!changedData || !changedData.selected_key.trim()) {
+    ({ data: changedData }: { data: { selectedKey: string } }) => {
+      if (!changedData || !changedData.selectedKey.trim()) {
         handleChange?.(emptyValue)
         return
       }
 
-      handleChange?.(changedData?.selected_key)
+      handleChange?.(changedData?.selectedKey)
     },
     [emptyValue, handleChange]
   )
 
   const valueIndex = autocompleteData.findIndex(
-    (item) => item.selected_key === value
+    (item) => item.selectedKey === value
   )
 
   return (

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Selection.tsx
@@ -58,11 +58,11 @@ function Selection(props: Props) {
   } = useDataValue(props)
 
   const handleDropdownChange = useCallback(
-    ({ data: { selected_key } }) => {
+    ({ data: { selectedKey } }) => {
       handleChange?.(
-        !selected_key || selected_key === clearValue
+        !selectedKey || selectedKey === clearValue
           ? emptyValue
-          : selected_key
+          : selectedKey
       )
     },
     [handleChange, emptyValue, clearValue]
@@ -80,14 +80,14 @@ function Selection(props: Props) {
   // copies of value as arguments.
   const handleShow = useCallback(
     ({ data }) => {
-      setHasFocus(true, data?.selected_key)
+      setHasFocus(true, data?.selectedKey)
     },
     [setHasFocus]
   )
 
   const handleHide = useCallback(
     ({ data }) => {
-      setHasFocus(false, data?.selected_key)
+      setHasFocus(false, data?.selectedKey)
     },
     [setHasFocus]
   )
@@ -172,7 +172,7 @@ function Selection(props: Props) {
           // Option components
           return child.props.text
             ? {
-                selected_key: String(child.props.value ?? ''),
+                selectedKey: String(child.props.value ?? ''),
                 content: [
                   child.props.title ?? child.props.children ?? (
                     <em>Untitled</em>
@@ -181,7 +181,7 @@ function Selection(props: Props) {
                 ],
               }
             : {
-                selected_key: child.props.value,
+                selectedKey: child.props.value,
                 content: child.props.title ?? child.props.children,
               }
         }
@@ -194,7 +194,7 @@ function Selection(props: Props) {
       const data = [
         clear
           ? {
-              selected_key: clearValue,
+              selectedKey: clearValue,
               content: (
                 <em>
                   {sharedContext?.translation.Forms.selectionClearSelected}

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Selection.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/Selection.test.tsx
@@ -18,6 +18,19 @@ describe('Selection', () => {
       expect(screen.queryByText('Fooo')).not.toBeInTheDocument()
     })
 
+    it('renders selected option', () => {
+      render(
+        <Field.Selection value="20">
+          <Field.Option value="10" title="Ten" />
+          <Field.Option value="20" title="Twenty" />
+          <Field.Option value="30" title="Thirty" />
+        </Field.Selection>
+      )
+      expect(screen.getByText('Twenty')).toBeInTheDocument()
+      expect(screen.queryByText('Ten')).not.toBeInTheDocument()
+      expect(screen.queryByText('Thirty')).not.toBeInTheDocument()
+    })
+
     it('should change option based on external value change', async () => {
       const { rerender } = render(
         <Field.Selection value="bar">