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 · Jul 26, 2017 · 92f0abf · 92f0abf
1 parent a065f67
commit 92f0abf
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 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();
 
@@ -104,6 +118,22 @@ export default Component.extend({
     chipsBlur(event) {
       if (!this.focusMovingTo(this.getInput(), event)) {
         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);
       }
     },
 
@@ -229,7 +259,7 @@ export default Component.extend({
   },
 
   focusMovingTo(selector, event) {
-    if (!isEmpty(event) && !isEmpty(event.relatedTarget) && this.$(event.relatedTarget).is(selector)) {
+    if (!isEmpty(event) && !isEmpty(event.relatedTarget) && this.$().find(event.relatedTarget).is(selector)) {
       return true;
     }
 

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>

diff --git a/addon/templates/components/paper-contact-chips.hbs b/addon/templates/components/paper-contact-chips.hbs
@@ -1,7 +1,7 @@
 <md-chips class="md-chips md-contact-chips {{if (and (not readOnly) isFocused) "md-focused"}}">
   <md-chips-wrap class="md-chips md-contact-chips {{if (and (not readOnly) isFocused) "md-focused"}}" tabindex="-1" onkeydown={{action "keyDown"}} 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">
           <div class="md-contact-avatar">
             <img src={{get item imageField}}>
@@ -10,7 +10,7 @@
         </div>
         <div class="md-chip-remove-container">
           {{#unless readOnly}}
-            <button class="md-chip-remove" {{action (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>