Merge branch 'pauln-chips-mouse-interaction'

CHANGELOG.md

@@ -18,7 +18,12 @@ Contributions and pull requests are always welcome. Contributors may often be fo
 ### master
 - [8544228](https://github.com/miguelcobain/ember-paper/commit/854422819791dfbda205f5ab437887129f699db1) fix going to tabs next page
 - [25432c9](https://github.com/miguelcobain/ember-paper/commit/25432c965205eb2512019437507cf840e1f8265e) add `center` and `stretch` options to tabs
-- [#632](https://github.com/miguelcobain/ember-paper/pull/632) BUGFIX - chips: Don't explicitly close autocomplete on input blur
+- [#632](https://github.com/miguelcobain/ember-paper/pull/632) and [#623](https://github.com/miguelcobain/ember-paper/pull/623) BUGFIX - paper-chips:
+  - Don't explicitly close autocomplete on input blur.
+  - Don't use `cursor: text` if `readOnly` is true.
+  - Adds the ability to click a chip to highlight it.
+  - Adds the ability to click anywhere in the chips element to give the input focus.
+  - Fixed issues with focus being left behind on autocomplete and contact chips elements.
 - [#377](https://github.com/miguelcobain/ember-paper/issues/377) BUGFIX - progress-linear: decimal values resulted in buggy animation
 
 ### 1.0.0-beta.1 (July 20, 2017) - Chester Bennington release. RIP.

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) && !this.get('readOnly')) {
+        // 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;
     }
 

addon/templates/components/paper-chips.hbs

@@ -1,11 +1,11 @@
 <md-chips-wrap
-  class="md-chips {{if (and (not readOnly) isFocused) "md-focused"}} {{unless readOnly "md-removable"}}"
+  class="md-chips {{if (and (not readOnly) isFocused) "md-focused"}} {{unless readOnly "md-removable"}} {{if readOnly "md-readonly"}}"
   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">
         {{#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>

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"}}>
+<md-chips class="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"}} {{if readOnly "md-readonly"}}" 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>