Add independent locale autofill support and remove independent width

dnbexperience · Dec 8, 2023 · 03d69b2 · 03d69b2
1 parent 67dcb24
commit 03d69b2
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 13 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/SelectCountry.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/SelectCountry.tsx
@@ -139,20 +139,22 @@ function SelectCountry(props: Props) {
   )
 
   const onBlurHandler = useCallback(
-    ({ value: currentValue }) => {
+    ({ value: currentValue, updateData, event }) => {
       // In order to support browser autofill
-      if (!value) {
+      if (typeof event?.nativeEvent?.data === 'undefined') {
+        const search = currentValue.toLowerCase()
         const country = countries.find(({ i18n }) =>
-          Object.values(i18n).includes(currentValue)
+          Object.values(i18n).some((s) => s.toLowerCase().includes(search))
         )
         if (country?.iso) {
+          updateData(dataRef.current)
           handleChange(country.iso, country)
         }
       }
 
       handleBlur()
     },
-    [value, handleChange, handleBlur]
+    [handleBlur, handleChange]
   )
 
   return (
@@ -176,7 +178,6 @@ function SelectCountry(props: Props) {
         on_focus={onFocusHandler}
         on_blur={onBlurHandler}
         on_change={handleCountryChange}
-        independent_width
         stretch
         keep_selection
         show_submit_button
@@ -214,7 +215,6 @@ export function getCountryData({
     const content = country.i18n[lang] ?? country.i18n.en
     return {
       selectedKey: country.iso,
-      search_content: Object.values(country.i18n),
       content,
     }
   },

diff --git a/...ges/dnb-eufemia/src/extensions/forms/Field/SelectCountry/__tests__/SelectCountry.test.tsx b/...ges/dnb-eufemia/src/extensions/forms/Field/SelectCountry/__tests__/SelectCountry.test.tsx
@@ -37,7 +37,7 @@ describe('Field.SelectCountry', () => {
     })
     expect(inputElement.value).toEqual('Norge')
 
-    fireEvent.change(inputElement, { target: { value: 'Denm' } })
+    fireEvent.change(inputElement, { target: { value: 'Dan' } })
     fireEvent.click(firstItemElement())
 
     expect(onChange).toHaveBeenLastCalledWith('DK', {
@@ -53,19 +53,62 @@ describe('Field.SelectCountry', () => {
     expect(inputElement.value).toEqual('Danmark')
   })
 
-  it('should select matching country on blur to support autofill', () => {
-    render(<SelectCountry />)
+  it('should select matching country on blur to support autofill with all locales', () => {
+    const onChange = jest.fn()
+
+    render(<SelectCountry onChange={onChange} />)
 
     const inputElement: HTMLInputElement = document.querySelector(
       '.dnb-forms-field-select-country input'
     )
+    const liElements = () =>
+      document.querySelectorAll('li:not([aria-hidden])')
+    const selectedItemElement = () =>
+      document.querySelector(
+        '.dnb-drawer-list__option.dnb-drawer-list__option--selected'
+      )
 
-    fireEvent.change(inputElement, { target: { value: 'Denmark' } })
+    // nb-NO
+    fireEvent.focus(inputElement)
+    fireEvent.change(inputElement, {
+      target: { value: 'sveri' },
+      nativeEvent: undefined,
+    })
     fireEvent.blur(inputElement)
 
-    const liElements = document.querySelectorAll('li:not([aria-hidden])')
-    expect(liElements[0].textContent).toBe('Danmark')
-    expect(liElements[1].className).toContain('dnb-autocomplete__show-all')
+    expect(inputElement.value).toEqual('Sverige')
+    expect(liElements().length).toBeGreaterThan(3)
+    expect(selectedItemElement().textContent).toBe('Sverige')
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenLastCalledWith('SE', {
+      cdc: '46',
+      continent: 'Europe',
+      i18n: { en: 'Sweden', nb: 'Sverige' },
+      iso: 'SE',
+      regions: ['Scandinavia', 'Nordic'],
+    })
+
+    // en-GB
+    fireEvent.focus(inputElement)
+    fireEvent.change(inputElement, {
+      target: { value: 'swit' },
+      nativeEvent: undefined,
+    })
+    fireEvent.blur(inputElement)
+
+    expect(inputElement.value).toEqual('Sveits')
+    expect(liElements().length).toBeGreaterThan(3)
+    expect(selectedItemElement().textContent).toBe('Sveits')
+    expect(onChange).toHaveBeenCalledTimes(2)
+    expect(onChange).toHaveBeenLastCalledWith('CH', {
+      cdc: '41',
+      continent: 'Europe',
+      i18n: {
+        en: 'Switzerland',
+        nb: 'Sveits',
+      },
+      iso: 'CH',
+    })
   })
 
   it('should change locale', () => {