Make changes by PR request from @henit

dnbexperience · Nov 27, 2023 · a322f93 · a322f93
1 parent ff1b8f3
commit a322f93
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 26 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
@@ -62,7 +62,6 @@ function PhoneNumber(props: Props) {
     label = sharedContext?.translation.Forms.phoneNumberLabel,
     numberMask,
     emptyValue,
-    value,
     info,
     warning,
     error,
@@ -100,14 +99,12 @@ function PhoneNumber(props: Props) {
     ) {
       countryCodeRef.current = countryCode || defaultCountryCode
 
-      if (lang === langRef.current) {
-        dataRef.current = getCountryData({
-          lang,
-          filter: countryCodeRef.current,
-        })
-      }
+      dataRef.current = getCountryData({
+        lang,
+        filter: countryCodeRef.current,
+      })
     }
-  }, [props.value]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [props.value, lang])
 
   /**
    * On external value change, update the internal,
@@ -118,10 +115,8 @@ function PhoneNumber(props: Props) {
     const newValue = phoneNumber
       ? joinValue([countryCode, phoneNumber])
       : emptyValue
-    if (newValue !== value) {
-      updateValue(newValue)
-    }
-  }, [props.value]) // eslint-disable-line react-hooks/exhaustive-deps
+    updateValue(newValue)
+  }, [props.value, emptyValue, updateValue])
 
   /**
    * Update whole contry list when lang changes.
@@ -173,15 +168,18 @@ function PhoneNumber(props: Props) {
     [countryCodeRef, emptyValue, handleChange, onNumberChange]
   )
 
-  const onFocusHandler = ({ updateData }) => {
-    if (dataRef.current.length < 10) {
-      dataRef.current = getCountryData({
-        lang: sharedContext.locale?.split('-')[0],
-      })
-      updateData(dataRef.current)
-    }
-    handleFocus()
-  }
+  const onFocusHandler = useCallback(
+    ({ updateData }) => {
+      if (dataRef.current.length < 10) {
+        dataRef.current = getCountryData({
+          lang: sharedContext.locale?.split('-')[0],
+        })
+        updateData(dataRef.current)
+      }
+      handleFocus()
+    },
+    [handleFocus, sharedContext.locale]
+  )
 
   return (
     <FieldBlock

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
@@ -40,7 +40,7 @@ describe('Field.PhoneNumber', () => {
   })
 
   it('should change locale', () => {
-    render(
+    const { rerender } = render(
       <Provider locale="en-GB">
         <PhoneNumber />
       </Provider>
@@ -52,11 +52,22 @@ describe('Field.PhoneNumber', () => {
 
     fireEvent.mouseDown(codeElement)
 
-    const selectedItemElement = document.querySelector(
-      '.dnb-drawer-list__option.dnb-drawer-list__option--selected'
+    const selectedItemElement = () =>
+      document.querySelector(
+        '.dnb-drawer-list__option.dnb-drawer-list__option--selected'
+      )
+
+    expect(selectedItemElement().textContent).toBe('+47 Norway')
+
+    rerender(
+      <Provider locale="nb-NO">
+        <PhoneNumber />
+      </Provider>
     )
 
-    expect(selectedItemElement.textContent).toBe('+47 Norway')
+    fireEvent.mouseDown(codeElement)
+
+    expect(selectedItemElement().textContent).toBe('+47 Norge')
   })
 
   it('should return correct value onFocus and onBlur event', async () => {

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
@@ -16,7 +16,6 @@ export function PhoneNumber() {
     <Field.PhoneNumber
       required
       value={state}
-      // validateInitially
       onBlur={console.log}
       onFocus={console.log}
       onChange={(value) => {