Fix react cmp setNumber not calling update

jackocnr · May 17, 2024 · edbafc6 · edbafc6
1 parent dcde606
commit edbafc6
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 11 deletions.
diff --git a/react/build/IntlTelInput.cjs b/react/build/IntlTelInput.cjs
@@ -2797,7 +2797,14 @@ var IntlTelInput = (0, import_react.forwardRef)(function IntlTelInput2({
   const inputRef = (0, import_react.useRef)(null);
   const itiRef = (0, import_react.useRef)(null);
   (0, import_react.useImperativeHandle)(ref, () => ({
-    getInstance: () => itiRef.current,
+    getInstance: () => ({
+      ...itiRef.current,
+      // override setNumber to also call update, to trigger onChangeNumber etc
+      setNumber: (num) => {
+        itiRef.current?.setNumber(num);
+        update();
+      }
+    }),
     getInput: () => inputRef.current
   }));
   const update = () => {

diff --git a/react/build/IntlTelInput.js b/react/build/IntlTelInput.js
@@ -2762,7 +2762,14 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
   const inputRef = useRef(null);
   const itiRef = useRef(null);
   useImperativeHandle(ref, () => ({
-    getInstance: () => itiRef.current,
+    getInstance: () => ({
+      ...itiRef.current,
+      // override setNumber to also call update, to trigger onChangeNumber etc
+      setNumber: (num) => {
+        itiRef.current?.setNumber(num);
+        update();
+      }
+    }),
     getInput: () => inputRef.current
   }));
   const update = () => {

diff --git a/react/build/IntlTelInputWithUtils.cjs b/react/build/IntlTelInputWithUtils.cjs
@@ -8995,7 +8995,14 @@ var IntlTelInput = (0, import_react.forwardRef)(function IntlTelInput2({
   const inputRef = (0, import_react.useRef)(null);
   const itiRef = (0, import_react.useRef)(null);
   (0, import_react.useImperativeHandle)(ref, () => ({
-    getInstance: () => itiRef.current,
+    getInstance: () => ({
+      ...itiRef.current,
+      // override setNumber to also call update, to trigger onChangeNumber etc
+      setNumber: (num) => {
+        itiRef.current?.setNumber(num);
+        update();
+      }
+    }),
     getInput: () => inputRef.current
   }));
   const update = () => {

diff --git a/react/build/IntlTelInputWithUtils.js b/react/build/IntlTelInputWithUtils.js
@@ -8960,7 +8960,14 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
   const inputRef = useRef(null);
   const itiRef = useRef(null);
   useImperativeHandle(ref, () => ({
-    getInstance: () => itiRef.current,
+    getInstance: () => ({
+      ...itiRef.current,
+      // override setNumber to also call update, to trigger onChangeNumber etc
+      setNumber: (num) => {
+        itiRef.current?.setNumber(num);
+        update();
+      }
+    }),
     getInput: () => inputRef.current
   }));
   const update = () => {

diff --git a/react/demo/ValidationApp.tsx b/react/demo/ValidationApp.tsx
@@ -12,9 +12,9 @@ const errorMap = [
 
 const App = (): ReactElement => {
   const [isValid, setIsValid] = useState<boolean | null>(null);
-   const [number, setNumber] = useState<string | null>(null);
-   const [errorCode, setErrorCode] = useState<number | null>(null);
-   const [notice, setNotice] = useState<string | null>(null);
+  const [number, setNumber] = useState<string | null>(null);
+  const [errorCode, setErrorCode] = useState<number | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
 
   const handleSubmit = (): void => {
     if (isValid) {

diff --git a/react/demo/simple-bundle.js b/react/demo/simple-bundle.js
@@ -32489,7 +32489,14 @@
     const inputRef = (0, import_react.useRef)(null);
     const itiRef = (0, import_react.useRef)(null);
     (0, import_react.useImperativeHandle)(ref, () => ({
-      getInstance: () => itiRef.current,
+      getInstance: () => ({
+        ...itiRef.current,
+        // override setNumber to also call update, to trigger onChangeNumber etc
+        setNumber: (num) => {
+          itiRef.current?.setNumber(num);
+          update();
+        }
+      }),
       getInput: () => inputRef.current
     }));
     const update = () => {

diff --git a/react/demo/validation-bundle.js b/react/demo/validation-bundle.js
@@ -32489,7 +32489,14 @@
     const inputRef = (0, import_react.useRef)(null);
     const itiRef = (0, import_react.useRef)(null);
     (0, import_react.useImperativeHandle)(ref, () => ({
-      getInstance: () => itiRef.current,
+      getInstance: () => ({
+        ...itiRef.current,
+        // override setNumber to also call update, to trigger onChangeNumber etc
+        setNumber: (num) => {
+          itiRef.current?.setNumber(num);
+          update();
+        }
+      }),
       getInput: () => inputRef.current
     }));
     const update = () => {

diff --git a/react/src/intl-tel-input/react.tsx b/react/src/intl-tel-input/react.tsx
@@ -29,7 +29,14 @@ const IntlTelInput = forwardRef(function IntlTelInput({
 
   // expose the instance and input ref to the parent component
   useImperativeHandle(ref, () => ({
-    getInstance: () => itiRef.current,
+    getInstance: () => ({
+      ...itiRef.current,
+      // override setNumber to also call update, to trigger onChangeNumber etc
+      setNumber: (num) => {
+        itiRef.current?.setNumber(num);
+        update();
+      },
+    }),
     getInput: () => inputRef.current,
   }));
 

diff --git a/react/src/intl-tel-input/reactWithUtils.tsx b/react/src/intl-tel-input/reactWithUtils.tsx
@@ -30,7 +30,14 @@ const IntlTelInput = forwardRef(function IntlTelInput({
 
   // expose the instance and input ref to the parent component
   useImperativeHandle(ref, () => ({
-    getInstance: () => itiRef.current,
+    getInstance: () => ({
+      ...itiRef.current,
+      // override setNumber to also call update, to trigger onChangeNumber etc
+      setNumber: (num) => {
+        itiRef.current?.setNumber(num);
+        update();
+      },
+    }),
     getInput: () => inputRef.current,
   }));