Fix option lazyLoad: false

addon/components/phone-input.js

@@ -152,6 +152,37 @@ export default Component.extend({
   didInsertElement() {
     this._super(...arguments);
 
+    this._loadAndSetup();
+  },
+
+  // this is a trick to format the number on user input
+  didRender() {
+    this._super(...arguments);
+
+    this._formatNumber();
+  },
+
+  willDestroyElement() {
+    this._iti.destroy();
+    this.element.removeEventListener('countrychange', this._onCountryChange);
+
+    this._super(...arguments);
+  },
+
+  async _loadAndSetup() {
+    await this.phoneInput.load();
+
+    this._setupLibrary();
+
+    this._formatNumber();
+
+    this.element.addEventListener(
+      'countrychange',
+      this._onCountryChange.bind(this)
+    );
+  },
+
+  _setupLibrary() {
     const {
       allowDropdown,
       autoPlaceholder,
@@ -173,29 +204,19 @@ export default Component.extend({
       separateDialCode
     });
 
-    const number = this.number;
-    if (number) {
-      _iti.setNumber(number);
+    if (this.number) {
+      _iti.setNumber(this.number);
     }
     this._iti = _iti;
 
     if (this.initialCountry) {
       this._iti.setCountry(this.initialCountry);
     }
 
-    this.update(number, this._metaData(_iti));
-
-    this.onCountryChange = () => {
-      this._iti.setCountry(this._iti.getSelectedCountryData().iso2);
-      this.input();
-    };
-    this.element.addEventListener('countrychange', this.onCountryChange);
+    this.update(this.number, this._metaData(_iti));
   },
 
-  // this is a trick to format the number on user input
-  didRender() {
-    this._super(...arguments);
-
+  _formatNumber() {
     if (!this._iti) {
       return;
     }
@@ -209,11 +230,9 @@ export default Component.extend({
     }
   },
 
-  willDestroyElement() {
-    this._iti.destroy();
-    this.element.removeEventListener('countrychange', this.onCountryChange);
-
-    this._super(...arguments);
+  _onCountryChange() {
+    this._iti.setCountry(this._iti.getSelectedCountryData().iso2);
+    this.input();
   },
 
   _metaData(iti) {

index.js

@@ -1,13 +1,5 @@
 'use strict';
 
-const Funnel = require('broccoli-funnel');
-const MergeTrees = require('broccoli-merge-trees');
-const path = require('path');
-
-const scriptsDestDir = 'assets/ember-phone-input/scripts/';
-const intlTelInputScriptName = 'intlTelInput.min.js';
-const utilsScriptName = 'utils.js';
-
 module.exports = {
   name: 'ember-phone-input',
 
@@ -33,33 +25,5 @@ module.exports = {
     // it get merged into vendor.css
     app.import('node_modules/intl-tel-input/build/css/intlTelInput.css');
     app.import('vendor/ember-phone-input.css');
-  },
-
-  treeForPublic() {
-    // copy these files to destDir
-    // to be able to lazyLoad them || not to bundle them into vendor.js
-    const intlTelInputPath = path.resolve(
-      require.resolve('intl-tel-input'),
-      '..'
-    );
-    const intlTelInputFiles = new Funnel(intlTelInputPath, {
-      srcDir: '/build/js',
-      include: [intlTelInputScriptName, utilsScriptName],
-      destDir: `/${scriptsDestDir}`
-    });
-
-    return new MergeTrees([intlTelInputFiles]);
-  },
-
-  contentFor(type, config) {
-    const { phoneInput, rootURL } = config;
-    const shouldLazyLoad = phoneInput ? phoneInput.lazyLoad : false;
-
-    if (type === 'body-footer' && !shouldLazyLoad) {
-      return `
-        <script type="text/javascript" src="${rootURL}${scriptsDestDir}${intlTelInputScriptName}"></script>
-        <script type="text/javascript" src="${rootURL}${scriptsDestDir}${utilsScriptName}"></script>
-      `;
-    }
   }
 };

package.json

@@ -44,8 +44,6 @@
     "@ember/optional-features": "^1.0.0",
     "babel-eslint": "^10.0.1",
     "broccoli-asset-rev": "^3.0.0",
-    "broccoli-funnel": "^2.0.1",
-    "broccoli-merge-trees": "^3.0.1",
     "ember-cli": "~3.13.1",
     "ember-cli-addon-docs": "^0.6.1",
     "ember-cli-addon-docs-yuidoc": "^0.2.1",

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

@@ -13,8 +13,6 @@ module('Integration | Component | phone-input', function(hooks) {
   test('renders an input of type tel', async function(assert) {
     assert.expect(1);
 
-    await this.owner.lookup('service:phone-input').load();
-
     await render(hbs`{{phone-input number='1111'}}`);
 
     assert.dom('input').hasAttribute('type', 'tel');
@@ -23,8 +21,6 @@ module('Integration | Component | phone-input', function(hooks) {
   test('renders the value', async function(assert) {
     assert.expect(3);
 
-    await this.owner.lookup('service:phone-input').load();
-
     const newValue = '2';
     this.set('number', null);
     this.set('update', () => {});
@@ -46,8 +42,6 @@ module('Integration | Component | phone-input', function(hooks) {
   test('renders the value with separate dial code option', async function(assert) {
     assert.expect(3);
 
-    await this.owner.lookup('service:phone-input').load();
-
     const newValue = '2';
     this.set('separateDialNumber', null);
     this.set('update', value => {
@@ -69,8 +63,6 @@ module('Integration | Component | phone-input', function(hooks) {
   test('can update the country', async function(assert) {
     assert.expect(2);
 
-    await this.owner.lookup('service:phone-input').load();
-
     const country = 'us';
     this.set('number', null);
     this.set('update', () => {});
@@ -87,11 +79,9 @@ module('Integration | Component | phone-input', function(hooks) {
     assert.dom('.iti-flag').hasClass('nz');
   });
 
-  test('can update the country', async function(assert) {
+  test('phoneNumber is correctly invalid when country is changed', async function(assert) {
     assert.expect(2);
 
-    await this.owner.lookup('service:phone-input').load();
-
     const country = 'fr';
     const validFrenchNumber = '0622334455';
     this.set('number', null);