Chips: Add missing mouse interactions

Add the ability to click anywhere in the chips element to give the input focus, plus the ability to click on a chip to focus it.
adopted-ember-addons · Jan 12, 2017 · 477242e · 477242e
1 parent 745789a
commit 477242e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/addon/components/paper-chips.js b/addon/components/paper-chips.js
@@ -33,6 +33,10 @@ export default Component.extend({
     }
   }),
 
+  click() {
+    this.getInput().focus();
+  },
+
   actions: {
     addItem(newItem) {
       if (this.get('requireMatch')) {
@@ -58,6 +62,16 @@ export default Component.extend({
       }
     },
 
+    removeItem(item) {
+      this.sendAction('removeItem', item);
+      let current = this.get('activeChip');
+
+      if (current === -1 || current >= this.get('content').length) {
+        this.queueReset();
+        this.set('activeChip', -1);
+      }
+    },
+
     inputFocus(autocomplete) {
       let input = this.getInput();
 
@@ -106,6 +120,22 @@ export default Component.extend({
     chipsBlur() {
       if (!this.focusMovingTo(this.getInput())) {
         this.set('focusedElement', 'none');
+        this.set('activeChip', -1);
+      }
+    },
+
+    chipClick(index, event) {
+      // Prevent click from bubbling up to the chips element.
+      event.stopPropagation();
+
+      // If we have a valid chip index, make it active.
+      if (!isEmpty(index)) {
+        // Shift actual focus to wrap so that subsequent blur events work as expected.
+        this.$('md-chips-wrap').focus();
+
+        // Update state to reflect the clicked chip being active.
+        this.set('focusedElement', 'chips');
+        this.set('activeChip', index);
       }
     },
 

diff --git a/addon/templates/components/paper-chips.hbs b/addon/templates/components/paper-chips.hbs
@@ -5,7 +5,7 @@
   onfocus={{action 'chipsFocus'}}
   onblur={{action 'chipsBlur'}}>
   {{#each content as |item index|}}
-    <md-chip class="md-chip md-default-theme {{if readOnly 'md-readonly'}} {{if (eq activeChip index) 'md-focused'}}">
+    <md-chip class="md-chip md-default-theme {{if readOnly 'md-readonly'}} {{if (eq activeChip index) 'md-focused'}}" onclick={{action 'chipClick' index}}>
       <div class="md-chip-content" tabindex="-1" aria-hidden="true">
         {{#if hasBlock}}
           {{yield item}}
@@ -15,7 +15,7 @@
       </div>
       <div class="md-chip-remove-container">
         {{#unless readOnly}}
-          <button class="md-chip-remove" onclick={{action removeItem item}} type="button" aria-hidden="true" tabindex="-1">
+          <button class="md-chip-remove" onclick={{action 'removeItem' item}} type="button" aria-hidden="true" tabindex="-1">
             {{paper-icon icon="clear" size=18}}
             <span class="md-visually-hidden"> Remove </span>
           </button>