fix(PhoneNumber): keep selected value on on blur

dnbexperience · Nov 12, 2023 · 65d0a71 · 65d0a71
1 parent fff72da
commit 65d0a71
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
@@ -73,16 +73,11 @@ function PhoneNumber(props: Props) {
       ? value.match(/^(\+[^ ]+)? ?(.*)$/)
       : [undefined, '', '']
 
-  const getCountryData = ({ filter = null } = {}) => {
-    const lang = sharedContext.locale?.split('-')[0]
-    return countries
-      .filter(({ cdc }) => !filter || `+${cdc}` === filter)
-      .sort(({ i18n: a }, { i18n: b }) => (a[lang] > b[lang] ? 1 : -1))
-      .map((country) => makeObject(country, lang))
-  }
-
   const singleCountryCodeData = useMemo(() => {
-    return getCountryData({ filter: countryCode })
+    return getCountryData({
+      lang: sharedContext.locale?.split('-')[0],
+      filter: countryCode,
+    })
   }, [])
 
   const handleCountryCodeChange = useCallback(
@@ -118,7 +113,9 @@ function PhoneNumber(props: Props) {
   const onFocusHandler = ({ dataList, updateData }) => {
     // because there can be more than one country with same cdc
     if (dataList.length < 10) {
-      updateData(getCountryData())
+      updateData(
+        getCountryData({ lang: sharedContext.locale?.split('-')[0] })
+      )
     }
     handleFocus()
   }
@@ -144,7 +141,6 @@ function PhoneNumber(props: Props) {
             countryCodeLabel ??
             sharedContext?.translation.Forms.countryCodeLabel
           }
-          mode="async"
           data={singleCountryCodeData}
           value={countryCode}
           disabled={disabled}
@@ -153,6 +149,7 @@ function PhoneNumber(props: Props) {
           on_change={handleCountryCodeChange}
           independent_width
           search_numbers
+          keep_value_and_selection
           no_animation={props.noAnimation}
           stretch={width === 'stretch'}
         />
@@ -214,5 +211,12 @@ function makeObject(country: CountryType, lang: string) {
   }
 }
 
+function getCountryData({ lang = 'en', filter = null } = {}) {
+  return countries
+    .filter(({ cdc }) => !filter || `+${cdc}` === filter)
+    .sort(({ i18n: a }, { i18n: b }) => (a[lang] > b[lang] ? 1 : -1))
+    .map((country) => makeObject(country, lang))
+}
+
 PhoneNumber._supportsSpacingProps = true
 export default PhoneNumber
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx
@@ -126,11 +126,21 @@ describe('Field.PhoneNumber', () => {
     expect(codeElement.value).toEqual('NO (+47)')
 
     // open
+    fireEvent.focus(codeElement)
     fireEvent.keyDown(codeElement, {
-      key: 'ArrowDown',
-      keyCode: 40,
+      key: 'Enter',
+      keyCode: 13,
     })
 
+    expect(
+      document.querySelector('li.dnb-drawer-list__option--selected')
+        .textContent
+    ).toBe('+47 Norge')
+
+    await userEvent.type(codeElement, '{Backspace}')
+
+    expect(codeElement.value).toEqual('NO (+47')
+
     expect(
       document.querySelectorAll('li.dnb-drawer-list__option')[0]
         .textContent

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/stories/PhoneNumber.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/stories/PhoneNumber.stories.tsx
@@ -0,0 +1,9 @@
+import { Field } from '../../..'
+
+export default {
+  title: 'Eufemia/Forms/PhoneNumber',
+}
+
+export function PhoneNumber() {
+  return <Field.PhoneNumber />
+}