DatePicker: support clearing value using delete (#9409)

* date-picker: fix #9276

https://github.com/ElemeFE/element/issues/9276

* test: fix broken test for form/date-picker
pull/9437/head
Jiewei Qian 2018-01-23 11:41:38 +08:00 committed by 杨奕
parent bbd69ea419
commit aaf7a87848
3 changed files with 73 additions and 7 deletions

View File

@ -14,9 +14,9 @@
@keydown.native="handleKeydown"
:value="displayValue"
@input="value => userInput = value"
@change="handleChange"
@mouseenter.native="handleMouseEnter"
@mouseleave.native="showClose = false"
@change.native="handleChange"
:validateEvent="false"
:prefix-icon="triggerClass"
ref="reference">
@ -545,6 +545,11 @@ export default {
}
}
}
if (this.userInput === '') {
this.emitInput(null);
this.emitChange(null);
this.userInput = null;
}
},
handleStartInput(event) {
@ -648,9 +653,8 @@ export default {
}
// Enter
if (keyCode === 13 && this.displayValue) {
const value = this.parseString(this.displayValue);
if (this.isValidValue(value)) {
if (keyCode === 13) {
if (this.userInput === '' || this.isValidValue(this.parseString(this.displayValue))) {
this.handleChange();
this.pickerVisible = this.picker.visible = false;
this.blur();

View File

@ -645,6 +645,66 @@ describe('DatePicker', () => {
});
});
describe('can be cleared using keyboard', () => {
it('works for type=date, when blur', done => {
vm = createVue({
template: `
<el-date-picker ref="compo" v-model="value" format="yyyy-MM-dd" type="date" />
`,
data() {
return {
value: new Date()
};
}
}, true);
const input = vm.$el.querySelector('input');
input.blur();
input.focus();
setTimeout(_ => {
// NOTE: simplified test
vm.$refs.compo.userInput = '';
vm.$refs.compo.handleChange();
setTimeout(_ => {
expect(vm.value).to.equal(null);
done();
}, DELAY);
}, DELAY);
});
it('works for type=date, when keydown.enter', done => {
vm = createVue({
template: `
<el-date-picker ref="compo" v-model="value" format="yyyy-MM-dd" type="date" />
`,
data() {
return {
value: new Date()
};
}
}, true);
const input = vm.$el.querySelector('input');
input.blur();
input.focus();
setTimeout(_ => {
// NOTE: simplified test
vm.$refs.compo.userInput = '';
keyDown(input, ENTER);
setTimeout(_ => {
expect(vm.value).to.equal(null);
done();
}, DELAY);
}, DELAY);
});
// TODO: implement the same feature for range panels
});
describe('nagivation', _ => {
const click = (el, cbk = () => {}) => {
el.click();

View File

@ -417,10 +417,12 @@ describe('Form', () => {
el.dispatchEvent(evt);
};
keyDown(input, 37);
keyDown(input, 13);
setTimeout(_ => {
expect(field.validateMessage).to.equal('');
done();
keyDown(input, 13);
setTimeout(_ => {
expect(field.validateMessage).to.equal('');
done();
}, DELAY);
}, DELAY);
}, DELAY);
}, DELAY);