fix: fix timepicker keyevent bug (#1151)

* fix: fix timepicker keyevent bug fix #904 * chore: update * chore: update * chore: update
element-plus · Dec 31, 2020 · f15d61d · f15d61d
1 parent a58f0fa
commit f15d61d
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 10 deletions.
diff --git a/.github/workflows/yarn.js.yml b/.github/workflows/yarn.js.yml
@@ -9,7 +9,9 @@ jobs:
  steps:
  - uses: actions/checkout@v2
  - name: Setup node
- uses: actions/setup-node@v1
+ uses: actions/setup-node@v2
+ with:
+ node-version: '12'
  - name: Install dependencies
  run: yarn bootstrap
  - name: Lint

diff --git a/packages/test-utils/trigger-event.ts b/packages/test-utils/trigger-event.ts
@@ -18,6 +18,12 @@ const triggerEvent = (elm, name, ...opts) => {
  const evt = document.createEvent(eventName)
 
  evt.initEvent(name, ...opts)
+
+ if (name === 'keydown' && opts[0]) {
+ // trigger event with keycode
+ // triggerEvent(ele, 'keydown', 'ArrowDown')
+ Object.defineProperty(evt, 'code', { value: opts[0] })
+ }
  elm.dispatchEvent
  ? elm.dispatchEvent(evt)
  : elm.fireEvent('on' + name, evt)

diff --git a/packages/time-picker/__tests__/time-picker.spec.ts b/packages/time-picker/__tests__/time-picker.spec.ts
@@ -1,6 +1,8 @@
 import { mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
 import TimePicker from '../src/time-picker'
+import { triggerEvent } from '@element-plus/test-utils'
+import dayjs from 'dayjs'
 
 const _mount = (template: string, data, otherObj?) => mount({
  components: {
@@ -139,7 +141,7 @@ describe('TimePicker', () => {
  expect(secondsDom).toBeUndefined()
  })
 
- it('event change, focus, blur', async () => {
+ it.only('event change, focus, blur', async () => {
  const changeHandler = jest.fn()
  const focusHandler = jest.fn()
  const blurHandler = jest.fn()
@@ -339,5 +341,28 @@ describe('TimePicker(range)', () => {
  const NextRightEndbledHours = getSpinnerTextAsArray(rightHoursEl, ':not(.disabled)')
  expect(NextRightEndbledHours).toEqual([ 12, 13, 14, 15, 16 ])
  })
+
+ it('arrow key', async () => {
+ const wrapper = _mount(`<el-time-picker
+ v-model="value"
+ format="YYYY-MM-DD HH:mm:ss"
+ />`, () => ({ value: new Date(2016, 9, 10, 18, 40) }))
+
+ const input = wrapper.find('input')
+ input.trigger('blur')
+ input.trigger('focus')
+ await nextTick()
+ const initValue = input.element.value
+ triggerEvent(input.element, 'keydown', 'ArrowDown')
+ await nextTick()
+ const addOneHour = input.element.value
+ triggerEvent(input.element, 'keydown', 'ArrowRight')
+ await nextTick()
+ triggerEvent(input.element, 'keydown', 'ArrowDown')
+ await nextTick()
+ const addOneHourOneMinute = input.element.value
+ expect(dayjs(initValue).diff(addOneHour, 'minute')).toEqual(-60)
+ expect(dayjs(initValue).diff(addOneHourOneMinute, 'minute')).toEqual(-61)
+ })
 })
 
diff --git a/packages/time-picker/src/common/picker.vue b/packages/time-picker/src/common/picker.vue
@@ -1,6 +1,6 @@
 <template>
  <el-popper
- ref="popper"
+ ref="refPopper"
  v-model:visible="pickerVisible"
  manual-mode
  effect="light"
@@ -18,7 +18,6 @@
  <template #trigger>
  <el-input
  v-if="!isRangeInput"
- ref="refContainer"
  v-clickoutside="onClickOutside"
  :model-value="displayValue"
  :name="name"
@@ -54,7 +53,6 @@
  </el-input>
  <div
  v-else
- ref="refContainer"
  v-clickoutside="onClickOutside"
  class="el-date-editor el-range-editor el-input__inner"
  :class="[
@@ -194,7 +192,7 @@ export default defineComponent({
  const elForm = inject(elFormKey, {} as ElFormContext)
  const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)
 
- const refContainer = ref(null)
+ const refPopper = ref(null)
  const pickerVisible = ref(false)
  const pickerActualVisible = ref(false)
  const valueOnOpen = ref(null)
@@ -222,8 +220,8 @@ export default defineComponent({
  }
  }
  const refInput = computed(() => {
- if (refContainer.value) {
- const _r = isRangeInput.value ? refContainer.value : refContainer.value.$el
+ if (refPopper.value.triggerRef) {
+ const _r = isRangeInput.value ? refPopper.value.triggerRef : refPopper.value.triggerRef.$el
  return [].slice.call(_r.querySelectorAll('input'))
  }
  return []
@@ -513,7 +511,7 @@ export default defineComponent({
  displayValue,
  parsedValue,
  setSelectionRange,
- refContainer,
+ refPopper,
  pickerDisabled,
  onSetPickerOption,
  }

diff --git a/packages/time-picker/src/time-picker-com/panel-time-pick.vue b/packages/time-picker/src/time-picker-com/panel-time-pick.vue
@@ -137,7 +137,7 @@ export default defineComponent({
 
  if (code === EVENT_CODE.up || code === EVENT_CODE.down) {
  const step = (code === EVENT_CODE.up) ? -1 : 1
- timePickeOptions['min_scrollDown'](step)
+ timePickeOptions['start_scrollDown'](step)
  event.preventDefault()
  return
  }