Add keyboard navigation to date|time picker

This commit is contained in:
Sergio Crisostomo 2018-05-18 13:06:43 +02:00
parent 2bf3e04753
commit 75cb299868
16 changed files with 467 additions and 67 deletions

View file

@ -116,7 +116,7 @@ describe('DatePicker.vue', () => {
`);
const picker = vm.$children[0];
picker.handleIconClick();
picker.handleFocus({type: 'focus'});
vm.$nextTick(() => {
const displayField = vm.$el.querySelector('.ivu-input');
const clickableCells = vm.$el.querySelectorAll('.ivu-date-picker-cells-cell');
@ -169,7 +169,7 @@ describe('DatePicker.vue', () => {
});
const picker = vm.$children[0];
picker.handleIconClick();
picker.handleFocus({type: 'focus'});
vm.$nextTick(() => {
const panel = vm.$el.querySelector('.ivu-picker-panel-content');
const dayPanel = panel.querySelector('[class="ivu-date-picker-cells"]');
@ -243,7 +243,7 @@ describe('DatePicker.vue', () => {
`);
const picker = vm.$children[0];
picker.handleIconClick();
picker.handleFocus({type: 'focus'});
vm.$nextTick(() => {
const displayField = vm.$el.querySelector('.ivu-input');
const clickableCells = vm.$el.querySelectorAll('.ivu-date-picker-cells-cell');
@ -266,9 +266,11 @@ describe('DatePicker.vue', () => {
// it should be closed by now
expect(picker.visible).to.equal(false);
// open picker again
picker.handleIconClick();
picker.handleFocus({type: 'focus'});
picker.visible = true;
vm.$nextTick(() => {
vm.$nextTick(() => {
expect(picker.visible).to.equal(true);
expect(JSON.stringify(picker.internalValue)).to.equal('[null,null]');
expect(displayField.value).to.equal('');
@ -355,7 +357,7 @@ describe('DatePicker.vue', () => {
`);
const picker = vm.$children[0];
picker.handleIconClick();
picker.handleFocus({type: 'focus'});
vm.$nextTick(() => {
const now = new Date();
const labels = vm.$el.querySelectorAll('.ivu-picker-panel-body .ivu-date-picker-header-label');

View file

@ -11,7 +11,7 @@ describe('TimePicker.vue', () => {
<Time-Picker></Time-Picker>
`);
const picker = vm.$children[0];
picker.handleIconClick(); // open the picker panels
picker.handleFocus({type: 'focus'}); // open the picker panels
vm.$nextTick(() => {
const spiners = picker.$el.querySelectorAll('.ivu-time-picker-cells-list');
@ -28,7 +28,7 @@ describe('TimePicker.vue', () => {
<Time-Picker format="HH:mm"></Time-Picker>
`);
const picker = vm.$children[0];
picker.handleIconClick(); // open the picker panels
picker.handleFocus({type: 'focus'}); // open the picker panels
vm.$nextTick(() => {
const spiners = picker.$el.querySelectorAll('.ivu-time-picker-cells-list');
@ -44,7 +44,7 @@ describe('TimePicker.vue', () => {
<Time-Picker :steps="[1, 15]"></Time-Picker>
`);
const picker = vm.$children[0];
picker.handleIconClick(); // open the picker panels
picker.handleFocus({type: 'focus'}); // open the picker panels
vm.$nextTick(() => {
const spiners = picker.$el.querySelectorAll('.ivu-time-picker-cells-list');