setNumber now triggers input event

build/js/intlTelInput.js

@@ -2734,6 +2734,7 @@ var factoryOutput = (() => {
       if (countryChanged) {
         this._triggerCountryChange();
       }
+      this._trigger("input");
     }
     //* Set the placeholder number typ
     setPlaceholderNumberType(type) {

build/js/intlTelInputWithUtils.js

@@ -2733,6 +2733,7 @@ var factoryOutput = (() => {
       if (countryChanged) {
         this._triggerCountryChange();
       }
+      this._trigger("input");
     }
     //* Set the placeholder number typ
     setPlaceholderNumberType(type) {

grunt/watch.js

@@ -9,7 +9,7 @@ module.exports = function(grunt) {
       tasks: "build:translations",
     },
     react: {
-      files: ["react/src/intl-tel-input/react.tsx", "react/demo/ValidationApp.tsx", "react/demo/SimpleApp.tsx"],
+      files: ["react/src/intl-tel-input/react.tsx", "react/demo/ValidationApp.tsx", "react/demo/SimpleApp.tsx", "react/demo/SetNumberApp.tsx"],
       tasks: "react"
     },
     pluginCss: {

react/build.js

@@ -63,3 +63,10 @@ build({
   entryPoints: ["react/demo/ValidationApp.tsx"],
   outfile: "react/demo/validation-bundle.js",
 });
+
+//* Set Number demo app
+build({
+  ...demoShared,
+  entryPoints: ["react/demo/SetNumberApp.tsx"],
+  outfile: "react/demo/set-number-bundle.js",
+});

react/build/IntlTelInput.cjs

@@ -2729,6 +2729,7 @@ var Iti = class {
     if (countryChanged) {
       this._triggerCountryChange();
     }
+    this._trigger("input");
   }
   //* Set the placeholder number typ
   setPlaceholderNumberType(type) {
@@ -2801,14 +2802,7 @@ 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: () => ({
-      setCountry: (country) => itiRef.current?.setCountry(country),
-      // override setNumber to also call update, to trigger onChangeNumber etc
-      setNumber: (num) => {
-        itiRef.current?.setNumber(num);
-        update();
-      }
-    }),
+    getInstance: () => itiRef.current,
     getInput: () => inputRef.current
   }));
   const update = () => {

react/build/IntlTelInput.js

@@ -2693,6 +2693,7 @@ var Iti = class {
     if (countryChanged) {
       this._triggerCountryChange();
     }
+    this._trigger("input");
   }
   //* Set the placeholder number typ
   setPlaceholderNumberType(type) {
@@ -2765,14 +2766,7 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
   const inputRef = useRef(null);
   const itiRef = useRef(null);
   useImperativeHandle(ref, () => ({
-    getInstance: () => ({
-      setCountry: (country) => itiRef.current?.setCountry(country),
-      // override setNumber to also call update, to trigger onChangeNumber etc
-      setNumber: (num) => {
-        itiRef.current?.setNumber(num);
-        update();
-      }
-    }),
+    getInstance: () => itiRef.current,
     getInput: () => inputRef.current
   }));
   const update = () => {

react/build/IntlTelInputWithUtils.cjs

@@ -2729,6 +2729,7 @@ var Iti = class {
     if (countryChanged) {
       this._triggerCountryChange();
     }
+    this._trigger("input");
   }
   //* Set the placeholder number typ
   setPlaceholderNumberType(type) {
@@ -8999,14 +9000,7 @@ 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: () => ({
-      setCountry: (country) => itiRef.current?.setCountry(country),
-      // override setNumber to also call update, to trigger onChangeNumber etc
-      setNumber: (num) => {
-        itiRef.current?.setNumber(num);
-        update();
-      }
-    }),
+    getInstance: () => itiRef.current,
     getInput: () => inputRef.current
   }));
   const update = () => {

react/build/IntlTelInputWithUtils.js

@@ -2693,6 +2693,7 @@ var Iti = class {
     if (countryChanged) {
       this._triggerCountryChange();
     }
+    this._trigger("input");
   }
   //* Set the placeholder number typ
   setPlaceholderNumberType(type) {
@@ -8963,14 +8964,7 @@ var IntlTelInput = forwardRef(function IntlTelInput2({
   const inputRef = useRef(null);
   const itiRef = useRef(null);
   useImperativeHandle(ref, () => ({
-    getInstance: () => ({
-      setCountry: (country) => itiRef.current?.setCountry(country),
-      // override setNumber to also call update, to trigger onChangeNumber etc
-      setNumber: (num) => {
-        itiRef.current?.setNumber(num);
-        update();
-      }
-    }),
+    getInstance: () => itiRef.current,
     getInput: () => inputRef.current
   }));
   const update = () => {

react/demo/SetNumberApp.tsx

@@ -0,0 +1,55 @@
+import React, { useState, ReactElement, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import IntlTelInput from "../src/intl-tel-input/reactWithUtils";
+
+const errorMap = [
+  "Invalid number",
+  "Invalid country code",
+  "Too short",
+  "Too long",
+  "Invalid number",
+];
+
+const App = (): ReactElement => {
+  const ref = useRef(null);
+  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 handleSetNumber = (): void => {
+    ref.current?.getInstance().setNumber("+14155552671");
+  };
+
+  const handleSubmit = (): void => {
+    if (isValid) {
+      setNotice(`Valid number: ${number}`);
+    } else {
+      const errorMessage = errorMap[errorCode || 0] || "Invalid number";
+      setNotice(`Error: ${errorMessage}`);
+    }
+  };
+
+  return (
+    <form>
+      <IntlTelInput
+        ref={ref}
+        onChangeNumber={setNumber}
+        onChangeValidity={setIsValid}
+        onChangeErrorCode={setErrorCode}
+        initOptions={{
+          initialCountry: "us",
+        }}
+      />
+      <button className="button" type="button" onClick={handleSetNumber}>Set Number</button>
+      <button className="button" type="button" onClick={handleSubmit}>Validate</button>
+      {notice && <div className="notice">{notice}</div>}
+    </form>
+  );
+};
+
+const container = document.getElementById("app");
+if (container) {
+  const root = createRoot(container);
+  root.render(<App />);
+}