intl-tel-input 19.3.0 → 19.4.0

package/spec.html

@@ -90,6 +90,8 @@
   
   <script src="src/spec/tests/options/geoIpLookup.js"></script>
   
+  <script src="src/spec/tests/options/hiddenInput.js"></script>
+  
   <script src="src/spec/tests/options/initialCountry.js"></script>
   
   <script src="src/spec/tests/options/nationalMode.js"></script>

package/src/js/intlTelInput.js

@@ -515,17 +515,38 @@ class Iti {
 
     if (hiddenInput) {
       const telInputName = this.telInput.getAttribute("name");
-      const hiddenInputName = hiddenInput(telInputName);
+      const result = hiddenInput(telInputName);
+      const isObject = result !== null && typeof result === "object";
+
+      let hiddenInputPhoneName;
+      let hiddenInputCountryName;
+
+      if (isObject) {
+        hiddenInputPhoneName = result.phone || telInputName;
+        hiddenInputCountryName = result.country || `${hiddenInputPhoneName}_country`;
+      } else {
+        hiddenInputPhoneName = result || telInputName;
+        hiddenInputCountryName = `${hiddenInputPhoneName}_country`;
+      }
+
+      // Check if a name has been determined for the phone input field after all conditions
+      if (!hiddenInputPhoneName) {
+        return;
+      }
+
+      // Create hidden input for the full international number
       this.hiddenInput = this._createEl("input", {
         type: "hidden",
-        name: hiddenInputName
+        name: hiddenInputPhoneName
       });
-      wrapper.appendChild(this.hiddenInput);
-      // add a 2nd hidden input for the selected country code - this is useful for handling invalid numbers with server-side validation, as getNumber does not always include the international dial code for invalid numbers
+
+      // Create hidden input for the selected country code
       this.hiddenInputCountry = this._createEl("input", {
         type: "hidden",
-        name: `${hiddenInputName}_country`
+        name: hiddenInputCountryName
       });
+
+      wrapper.appendChild(this.hiddenInput);
       wrapper.appendChild(this.hiddenInputCountry);
     }
   }

package/src/spec/helpers/helpers.js

@@ -50,6 +50,11 @@ var getParentElement = function(i) {
   return i.parent();
 };
 
+var getHiddenInputs = function(i) {
+  i = i || input;
+  return i.parent().find("input[type=hidden]");
+};
+
 var getDropdownContent = function(i) {
   i = i || input;
   return i.parent().find(".iti__dropdown-content");

package/src/spec/tests/options/hiddenInput.js

@@ -0,0 +1,120 @@
+"use strict";
+
+describe("hiddenInput: ", function() {
+
+  beforeEach(function() {
+    intlSetup();
+  });
+
+  afterEach(function() {
+    intlTeardown();
+  });
+
+  describe("init plugin with hiddenInput returning a string", function() {
+
+    beforeEach(function() {
+      input = $("<input>").wrap("div");
+      iti = window.intlTelInput(input[0], {
+        hiddenInput: () => "phone_full"
+      });
+    });
+
+    it("creates two hidden inputs", function() {
+      expect(getHiddenInputs()).toHaveLength(2);
+    });
+
+    it("sets the name of the first hidden input to the returned string", function() {
+      expect(getHiddenInputs().eq(0)).toHaveAttr("name", "phone_full");
+    });
+
+    it("sets the name of the second hidden input to the returned string with a '_country' suffix", function() {
+      expect(getHiddenInputs().eq(1)).toHaveAttr("name", "phone_full_country");
+    });
+  });
+
+  describe("init plugin with hiddenInput returning an object with correct properties", function() {
+
+    beforeEach(function() {
+      input = $("<input>").wrap("div");
+      iti = window.intlTelInput(input[0], {
+        hiddenInput: () => ({
+          phone: "phone_full",
+          country: "phone_country"
+        })
+      });
+    });
+
+    it("creates two hidden inputs", function() {
+      expect(getHiddenInputs()).toHaveLength(2);
+    });
+
+    it("sets the name of the first hidden input to the returned object's 'phone' property", function() {
+      expect(getHiddenInputs().eq(0)).toHaveAttr("name", "phone_full");
+    });
+
+    it("sets the name of the second hidden input to the returned object's 'country' property", function() {
+      expect(getHiddenInputs().eq(1)).toHaveAttr("name", "phone_country");
+    });
+  });
+
+  describe("init plugin with hiddenInput returning an object with incorrect properties", function() {
+
+    beforeEach(function() {
+      input = $("<input name='phone'>").wrap("div");
+      iti = window.intlTelInput(input[0], {
+        hiddenInput: () => ({
+          test: "test",
+          data: "data"
+        })
+      });
+    });
+
+    it("creates two hidden inputs", function() {
+      expect(getHiddenInputs()).toHaveLength(2);
+    });
+
+    it("sets the name of the hidden input to the name of the input", function() {
+      expect(getHiddenInputs().eq(0)).toHaveAttr("name", "phone");
+    });
+
+    it("sets the name of the second hidden input to the name of the input with a '_country' suffix", function() {
+      expect(getHiddenInputs().eq(1)).toHaveAttr("name", "phone_country");
+    });
+  });
+
+  describe("init plugin with hiddenInput returning an empty object", function() {
+
+    beforeEach(function() {
+      input = $("<input name='phone'>").wrap("div");
+      iti = window.intlTelInput(input[0], {
+        hiddenInput: () => ({})
+      });
+    });
+
+    it("creates two hidden inputs", function() {
+      expect(getHiddenInputs()).toHaveLength(2);
+    });
+
+    it("sets the name of the hidden input to the name of the input", function() {
+      expect(getHiddenInputs().eq(0)).toHaveAttr("name", "phone");
+    });
+
+    it("sets the name of the second hidden input to the name of the input with a '_country' suffix", function() {
+      expect(getHiddenInputs().eq(1)).toHaveAttr("name", "phone_country");
+    });
+  });
+
+  describe("init plugin with no name attribute set on input and hiddenInput returning an empty object", function() {
+
+    beforeEach(function() {
+      input = $("<input>").wrap("div");
+      iti = window.intlTelInput(input[0], {
+        hiddenInput: () => ({})
+      });
+    });
+
+    it("does not create any hidden inputs", function() {
+      expect(getHiddenInputs()).toHaveLength(0);
+    });
+  });
+});