From 79d5fdacade35b21cb9aadf3a03989d0d7325a7e Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Fri, 9 Sep 2016 02:26:52 -0300
Subject: [PATCH] Add keyboard shortcuts to select

---
 package.json                          |  1 +
 src/components/mdSelect/mdOption.vue  | 44 +++++++++++++++++++++++----
 src/components/mdSelect/mdSelect.scss | 25 +++++++--------
 src/components/mdSelect/mdSelect.vue  | 29 ++++++++++++------
 src/core/core.vue                     |  4 ---
 src/core/directives/clickaway.js      | 18 -----------
 src/docs/pages/Select.vue             | 25 +++++++--------
 7 files changed, 80 insertions(+), 66 deletions(-)
 delete mode 100644 src/core/directives/clickaway.js

diff --git a/package.json b/package.json
index 02db9db..3481e16 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "autosize": "^3.0.17",
+    "element.scrollintoviewifneeded-polyfill": "^1.0.1",
     "scopedQuerySelectorShim": "github:lazd/scopedQuerySelectorShim"
   },
   "devDependencies": {
diff --git a/src/components/mdSelect/mdOption.vue b/src/components/mdSelect/mdOption.vue
index 0ebc209..0e9b925 100644
--- a/src/components/mdSelect/mdOption.vue
+++ b/src/components/mdSelect/mdOption.vue
@@ -1,5 +1,12 @@
 <template>
-  <div class="md-option" @click="selectOption" v-md-ink-ripple>
+  <div
+    class="md-option"
+    :class="classes"
+    @click="selectOption"
+    @mouseenter="setHighlight"
+    @keydown.enter="selectOption"
+    v-md-ink-ripple
+    tabindex="-1">
     <span>
       <slot></slot>
     </span>
@@ -7,6 +14,8 @@
 </template>
 
 <script>
+  import 'element.scrollintoviewifneeded-polyfill';
+
   export default {
     props: {
       value: [String, Boolean, Number]
@@ -16,19 +25,42 @@
         index: 0
       };
     },
+    computed: {
+      classes() {
+        return {
+          'md-highlighted': this.hasHighlight()
+        };
+      }
+    },
+    watch: {
+      classes() {
+        if (this.hasHighlight()) {
+          this.$el.focus();
+          this.$el.scrollIntoViewIfNeeded(false);
+        }
+      }
+    },
     methods: {
+      setHighlight() {
+        this.$parent.highlightOption(this.index);
+      },
+      hasHighlight() {
+        return this.index === this.$parent.highlighted;
+      },
       selectOption() {
-        if (this.$parent.$el.classList.contains('md-select')) {
-          this.$parent.selectOption(this.value);
-        } else {
-          this.$parent.$parent.selectOption(this.value);
+        if (this.hasHighlight()) {
+          if (this.$parent.$el.classList.contains('md-select')) {
+            this.$parent.selectOption(this.value);
+          } else {
+            this.$parent.$parent.selectOption(this.value);
+          }
         }
       }
     },
     mounted() {
       let parentClasses = this.$parent.$el.classList;
 
-      if (!parentClasses.contains('md-select') && !parentClasses.contains('md-option-group')) {
+      if (!parentClasses.contains('md-select')) {
         this.$destroy();
 
         throw new Error('You should wrap the md-option in a md-select');
diff --git a/src/components/mdSelect/mdSelect.scss b/src/components/mdSelect/mdSelect.scss
index e5ea27d..a806996 100644
--- a/src/components/mdSelect/mdSelect.scss
+++ b/src/components/mdSelect/mdSelect.scss
@@ -102,6 +102,15 @@
     overflow-x: hidden;
     overflow-y: auto;
   }
+
+  .md-subheader {
+    color: rgba(#757575, .87);
+    text-transform: uppercase;
+
+    &:first-child {
+      margin-top: -8px;
+    }
+  }
 }
 
 .md-option {
@@ -114,13 +123,14 @@
   overflow: hidden;
   cursor: pointer;
   position: relative;
+  transform: translate3D(0, 0, 0);
   transition: $swift-ease-out;
   font-size: 16px;
   line-height: 1.2em;
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  &:hover {
+  &.md-highlighted {
     background-color: rgba(#000, .12);
   }
 
@@ -130,16 +140,3 @@
     white-space: nowrap;
   }
 }
-
-.md-option-group:first-child {
-  margin-top: -8px;
-}
-
-.md-option-group-label {
-  padding: 16px;
-  display: block;
-  color: rgba(#757575, .87);
-  font-size: 14px;
-  font-weight: 500;
-  text-transform: uppercase;
-}
diff --git a/src/components/mdSelect/mdSelect.vue b/src/components/mdSelect/mdSelect.vue
index 6e20c08..8e84b26 100644
--- a/src/components/mdSelect/mdSelect.vue
+++ b/src/components/mdSelect/mdSelect.vue
@@ -2,8 +2,7 @@
   <div
     class="md-select"
     :class="classes"
-    :tabindex="disabled ? null : '0'"
-    v-on-clickaway="close">
+    :tabindex="disabled ? null : '0'">
     <span class="md-select-value" @click="show">{{ value }}</span>
 
     <div
@@ -11,8 +10,8 @@
       tabindex="-1"
       ref="menu"
       @keydown.esc.prevent="close"
-      @keydown.up.prevent="highlightOption(-1)"
-      @keydown.down.prevent="highlightOption(1)">
+      @keydown.up.prevent="highlightOption(highlighted - 1)"
+      @keydown.down.prevent="highlightOption(highlighted + 1)">
       <div class="md-select-menu-container">
         <slot></slot>
       </div>
@@ -54,16 +53,23 @@
       show() {
         this.$refs.menu.focus();
         this.active = true;
+        document.addEventListener('click', this.closeOnOffClick);
       },
       close() {
-        this.$refs.menu.blur();
-        this.active = false;
+        if (this.active) {
+          this.$refs.menu.blur();
+          this.active = false;
+          document.removeEventListener('click', this.closeOnOffClick);
+        }
+      },
+      closeOnOffClick(event) {
+        if (!this.$el.contains(event.target)) {
+          this.close();
+        }
       },
       highlightOption(factor) {
-        let factorAbs = Math.abs(factor);
-
-        if (factorAbs >= 0 && factorAbs <= this.optionsAmount) {
-          this.highlighted += factor;
+        if (factor >= 1 && factor <= this.optionsAmount) {
+          this.highlighted = factor;
         }
       },
       selectOption(value) {
@@ -82,10 +88,13 @@
 
       this.$parent.setValue(this.value);
       this.$parent.hasSelect = true;
+
     },
     beforeDestroy() {
       this.$parent.setValue(null);
       this.$parent.hasSelect = false;
+
+      document.removeEventListener('click', this.closeOnOffClick);
     }
   };
 </script>
diff --git a/src/core/core.vue b/src/core/core.vue
index cfc7c25..59403a8 100644
--- a/src/core/core.vue
+++ b/src/core/core.vue
@@ -1,13 +1,9 @@
 <script>
-  import Vue from 'vue';
   import CoreTheme from './stylesheets/core.theme';
-  import clickaway from './directives/clickaway';
 
   window.VueMaterial = {
     styles: [CoreTheme]
   };
-
-  Vue.directive('onClickaway', clickaway);
 </script>
 
 <style lang="sass">
diff --git a/src/core/directives/clickaway.js b/src/core/directives/clickaway.js
deleted file mode 100644
index 6abbe35..0000000
--- a/src/core/directives/clickaway.js
+++ /dev/null
@@ -1,18 +0,0 @@
-let handleClick;
-
-export default {
-  acceptStatement: true,
-  priority: 700,
-  update(element, handler) {
-    handleClick = function(event) {
-      if (!element.contains(event.target)) {
-        handler.value(event);
-      }
-    };
-
-    document.documentElement.addEventListener('click', handleClick);
-  },
-  unbind() {
-    document.documentElement.removeEventListener(document.documentElement, 'click', handleClick);
-  }
-};
diff --git a/src/docs/pages/Select.vue b/src/docs/pages/Select.vue
index b6f9d4c..a694fd0 100644
--- a/src/docs/pages/Select.vue
+++ b/src/docs/pages/Select.vue
@@ -50,22 +50,19 @@
       <md-input-container>
         <label for="food">Food</label>
         <md-select name="food" id="food" v-model="food">
-          <md-optgroup label="Fruits">
-            <md-option value="Apples">Apples</md-option>
-            <md-option value="Bananas">Bananas</md-option>
-            <md-option value="Peaches">Peaches</md-option>
-            <md-option value="Oranges">Oranges</md-option>
-          </md-optgroup>
+          <md-subheader>Fruits</md-subheader>
+          <md-option value="Apples">Apples</md-option>
+          <md-option value="Bananas">Bananas</md-option>
+          <md-option value="Peaches">Peaches</md-option>
+          <md-option value="Oranges">Oranges</md-option>
 
-          <md-optgroup label="Vegetables">
-            <md-option value="Carrots">Carrots</md-option>
-            <md-option value="Cucumbers">Cucumbers</md-option>
-          </md-optgroup>
+          <md-subheader>Vegetables</md-subheader>
+          <md-option value="Carrots">Carrots</md-option>
+          <md-option value="Cucumbers">Cucumbers</md-option>
 
-          <md-optgroup label="Baked Goods">
-            <md-option value="Apple Pie">Apple Pie</md-option>
-            <md-option value="Chocolate Cake">Chocolate Cake</md-option>
-          </md-optgroup>
+          <md-subheader>Baked Goods</md-subheader>
+          <md-option value="Apple Pie">Apple Pie</md-option>
+          <md-option value="Chocolate Cake">Chocolate Cake</md-option>
         </md-select>
       </md-input-container>
     </div>