add 'allowAutoFormat' option to disable automatic transformation letters -> numbers

addon/components/phone-input.js

@@ -8,6 +8,7 @@ import { isPresent } from '@ember/utils';
   ```hbs
     {{phone-input
     allowDropdown=false
+    allowAutoFormat=false
     autoPlaceholder='aggressive'
     disabled=true
     required=required
@@ -81,6 +82,15 @@ export default Component.extend({
       ? this.allowDropdown
       : true;
 
+    /**
+      Whether or not to allow auto format phone number. If disabled, phone number will be applied as it is, without any transformations via internalization library.
+
+      @argument allowAutoFormat
+      @type {boolean}
+    */
+
+    this.allowAutoFormat = this.allowAutoFormat || true;
+
     /**
       Add or remove input placeholder with an example number for the selected
       country. Possible values are 'polite', 'aggressive' and 'off'. Defaults to
@@ -158,10 +168,17 @@ export default Component.extend({
     );
   },
 
-  input() {
-    const internationalPhoneNumber = this._iti.getNumber();
-
+  input(event) {
     var meta = this._metaData(this._iti);
+    var internationalPhoneNumber;
+
+    if (this.allowAutoFormat) {
+      internationalPhoneNumber = this._iti.getNumber();
+    } else {
+      const countryCode = meta.selectedCountryData.dialCode;
+      internationalPhoneNumber = `+${countryCode} ${event.target.value}`;
+    }
+
     this.update(internationalPhoneNumber, meta);
 
     return true;
@@ -203,6 +220,7 @@ export default Component.extend({
   _setupLibrary() {
     const {
       allowDropdown,
+      allowAutoFormat,
       autoPlaceholder,
       initialCountry,
       onlyCountries,
@@ -215,6 +233,7 @@ export default Component.extend({
       autoHideDialCode: true,
       nationalMode: true,
       allowDropdown,
+      allowAutoFormat,
       autoPlaceholder,
       initialCountry,
       onlyCountries,
@@ -235,7 +254,7 @@ export default Component.extend({
   },
 
   _formatNumber() {
-    if (!this._iti) {
+    if (!this._iti || !this.allowAutoFormat) {
       return;
     }
 

tests/dummy/app/pods/docs/components/phone-input/all-options/component.js

@@ -20,6 +20,16 @@ export default Component.extend({
       this.setProperties(metaData);
     },
 
+    updateAllowAutoFormat(allowAutoFormatNumber, metaData) {
+      this.set('allowAutoFormatNumber', allowAutoFormatNumber);
+      this.setProperties(metaData);
+    },
+
+    updateDisallowAutoFormat(disallowAutoFormatNumber, metaData) {
+      this.set('disallowAutoFormatNumber', disallowAutoFormatNumber);
+      this.setProperties(metaData);
+    },
+
     submitForm() {
       alert('The form has been submitted');
     }

tests/dummy/app/pods/docs/components/phone-input/all-options/template.hbs

@@ -78,4 +78,20 @@
   {{/demo.example}}
 
   {{demo.snippet "phone-input-autocomplete-option.hbs"}}
-{{/docs-demo}}
+{{/docs-demo}}
+
+<h2>`allowAutoFormat` option</h2>
+{{#docs-demo as |demo|}}
+    <p>The auto-format can be disabled (try to enter letters after numbers).</p>
+    <p><i>Example: 222qqqqqq</i></p>
+  {{#demo.example name="phone-input-allow-auto-format-option.hbs"}}
+    <p>{{phone-input allowAutoFormat=false number=disallowAutoFormatNumber initialCountry="us" update=(action "updateDisallowAutoFormat")}}</p>
+
+    <p>The auto-format enabled by default (letters will be transformed to numbers):</p>
+
+    <p>{{phone-input allowAutoFormat=true number=allowAutoFormatNumber initialCountry="us" update=(action "updateAllowAutoFormat")}}</p>
+
+  {{/demo.example}}
+
+  {{demo.snippet "phone-input-allow-auto-format-option.hbs"}}
+{{/docs-demo}}

tests/integration/components/phone-input-test.js

@@ -41,6 +41,26 @@ module('Integration | Component | phone-input', function(hooks) {
     assert.dom('input').hasValue(newValue);
   });
 
+  test('letters transformation can be disabled', async function(assert) {
+    const newValue = '222test';
+    this.set('number', null);
+    this.set('update', () => {});
+
+    await render(
+      hbs`{{phone-input allowAutoFormat=false number=number update=(action update)}}`
+    );
+
+    assert.dom('input').hasValue('');
+
+    this.set('update', () => {
+      this.set('number', newValue);
+    });
+
+    await fillIn('input', newValue);
+
+    assert.dom('input').hasValue(newValue);
+  });
+
   test('renders the value with separate dial code option', async function(assert) {
     assert.expect(3);