[FEATURE] Add allowDropdown option

addon/components/phone-input.js

@@ -1,11 +1,13 @@
 import Component from '@ember/component';
 import { assert } from '@ember/debug';
 import { inject as service } from '@ember/service';
+import { isPresent } from '@ember/utils';
 
 /**
   A phone-input component. Usage:
   ```hbs
     {{phone-input
+    allowDropdown=false
     autoPlaceholder='aggressive'
     disabled=true
     initialCountry='fr'
@@ -50,6 +52,17 @@ export default Component.extend({
     */
     this.number = this.number || null;
 
+    /**
+      Whether or not to allow the dropdown. If disabled, there is no dropdown arrow, and the selected flag is not clickable. Also we display the selected flag on the right instead because it is just a marker of state.
+
+      @argument allowDropdown
+      @type {boolean}
+    */
+
+    this.allowDropdown = isPresent(this.allowDropdown)
+      ? this.allowDropdown
+      : true;
+
     /**
       Add or remove input placeholder with an example number for the selected
       country. Possible values are 'polite', 'aggressive' and 'off'. Defaults to
@@ -140,6 +153,7 @@ export default Component.extend({
     this._super(...arguments);
 
     const {
+      allowDropdown,
       autoPlaceholder,
       initialCountry,
       onlyCountries,
@@ -151,6 +165,7 @@ export default Component.extend({
     var _iti = this.phoneInput.intlTelInput(input, {
       autoHideDialCode: true,
       nationalMode: true,
+      allowDropdown,
       autoPlaceholder,
       initialCountry,
       onlyCountries,

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

@@ -1,6 +1,7 @@
 import Component from '@ember/component';
 
 export default Component.extend({
+  allowDropdownNumber: null,
   number: null,
   separateDialNumber: null,
 
@@ -10,6 +11,10 @@ export default Component.extend({
       this.setProperties(metaData);
     },
 
+    updateAllowDropdownNumber(allowDropdownNumber) {
+      this.set('allowDropdownNumber', allowDropdownNumber);
+    },
+
     updateSeparateDialOption(separateDialNumber, metaData) {
       this.set('separateDialNumber', separateDialNumber);
       this.setProperties(metaData);

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

@@ -31,3 +31,18 @@
 
   {{demo.snippet "phone-input-separate-dial-option.hbs"}}
 {{/docs-demo}}
+
+<h2>`allowDropdown` option</h2>
+{{#docs-demo as |demo|}}
+  {{#demo.example name="phone-input-allow-dropdown-option.hbs"}}
+
+    <p>{{phone-input allowDropdown=false number=allowDropdownNumber initialCountry="fr" update=(action "updateAllowDropdownNumber")}}</p>
+
+    <p>The dropdown can be disabled.</p>
+
+    <p>The internal phone number you'll want to persist on your backend is <em>\{{allowDropdownNumber}}: </em><strong>{{allowDropdownNumber}}</strong></p>
+
+  {{/demo.example}}
+
+  {{demo.snippet "phone-input-allow-dropdown-option.hbs"}}
+{{/docs-demo}}

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

@@ -128,4 +128,16 @@ module('Integration | Component | phone-input', function(hooks) {
     );
     assert.ok(find('input').disabled);
   });
+
+  test('can prevent the dropdown', async function(assert) {
+    assert.expect(1);
+
+    this.set('updateAllowDropdownNumber', () => {});
+
+    await render(
+      hbs`{{phone-input allowDropdown=false update=(action updateAllowDropdownNumber)}}`
+    );
+
+    assert.dom('ul.country-list').doesNotExist();
+  });
 });