TimeSelect: support select with up & down (#6023)

* TimeSelect: support select with up&down

* using map & indexOf instead of findIndex

* fix select when time disabled

* fix ArrowUp

* TimeSelect: valid data when component blur or enter

* fix: #2514

packages/date-picker/src/panel/time-select.vue

@@ -105,6 +105,24 @@
 
       handleMenuEnter() {
         this.$nextTick(() => this.scrollToOption());
+      },
+
+      scrollDown(step) {
+        const items = this.items;
+        let index = items.map(item => item.value).indexOf(this.value);
+        let length = items.length;
+        let total = Math.abs(step);
+        step = step > 0 ? 1 : -1;
+        while (length-- && total) {
+          index = (index + step + items.length) % items.length;
+          const item = items[index];
+          if (!item.disabled) {
+            total--;
+          }
+        }
+        if (!items[index].disabled) {
+          this.value = items[index].value;
+        }
       }
     },
 

packages/date-picker/src/picker/time-select.js

@@ -9,5 +9,35 @@ export default {
   beforeCreate() {
     this.type = 'time-select';
     this.panel = Panel;
+  },
+
+  methods: {
+    handleKeydown(event) {
+      const keyCode = event.keyCode;
+      // TAB or ESC or Enter
+      if (keyCode === 9 || keyCode === 27 || keyCode === 13) {
+        const input = this.$refs.reference;
+        const index = this.picker.items.map(v => v.value).indexOf(input.currentValue);
+        const exist = index !== -1;
+        if (!exist) {
+          input.currentValue = this.currentValue;
+        } else {
+          this.picker.handleClick(this.picker.items[index]);
+        }
+        this.pickerVisible = false;
+        input.$refs.input.blur();
+        event.stopPropagation();
+        return;
+      }
+
+      if (keyCode === 38 || keyCode === 40) {
+        const mapping = { 40: 1, 38: -1 };
+        const offset = mapping[keyCode.toString()];
+        this.picker.scrollDown(offset);
+        this.currentValue = this.picker.value;
+        event.stopPropagation();
+        return;
+      }
+    }
   }
 };