[FEATURE] Add allowDropdown option

qonto · Oct 11, 2019 · a7119d3 · a7119d3
1 parent 2ee1142
commit a7119d3
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 0 deletions.
diff --git a/addon/components/phone-input.js b/addon/components/phone-input.js
@@ -11,6 +11,7 @@ const PHONE_NUMBER_FORMAT = 'E164' // https://en.wikipedia.org/wiki/E.164
   A phone-input component. Usage:
   ```hbs
     {{phone-input
+    allowDropdown=false
     autoPlaceholder='aggressive'
     initialCountry='fr'
     number='123'
@@ -44,6 +45,14 @@ 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 = this.allowDropdown || this.allowDropdown === undefined
+
     /**
       Add or remove input placeholder with an example number for the selected
       country. Possible values are 'polite', 'aggressive' and 'off'. Defaults to
@@ -135,6 +144,7 @@ export default Component.extend({
     this._super(...arguments)
 
     const {
+      allowDropdown,
       autoPlaceholder,
       initialCountry,
       onlyCountries,
@@ -146,6 +156,7 @@ export default Component.extend({
     var _iti = intlTelInput(input, {
       autoHideDialCode: true,
       nationalMode: true,
+      allowDropdown,
       autoPlaceholder,
       initialCountry,
       onlyCountries,

diff --git a/tests/dummy/app/pods/docs/components/phone-input/all-options/component.js b/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({
+  allowDropdown: null,
   number: null,
   separateDialNumber: null,
 

diff --git a/tests/dummy/app/pods/docs/components/phone-input/all-options/template.hbs b/tests/dummy/app/pods/docs/components/phone-input/all-options/template.hbs
@@ -31,3 +31,16 @@
 
   {{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 initialCountry="fr" update=(action "handleUpdate")}}</p>
+
+    <p>The dropdown can be disabled.</p>
+
+  {{/demo.example}}
+
+  {{demo.snippet "phone-input-allow-dropdown-option.hbs"}}
+{{/docs-demo}}
diff --git a/tests/integration/components/phone-input-test.js b/tests/integration/components/phone-input-test.js
@@ -110,4 +110,20 @@ module('Integration | Component | phone-input', function(hooks) {
 
     this.set('country', 'pt')
   })
+
+  test('can prevent the dropdown', async function(assert) {
+    assert.expect(1)
+
+    await this.owner.lookup('service:phone-input').load()
+
+    this.set('update', value => {
+      this.set('allowDropdown', value)
+    })
+
+    await render(
+      hbs`{{phone-input allowDropdown=false update=(action update)}}`
+    )
+
+    assert.dom('ul.country-list').doesNotExist()
+  })
 })