mirror of https://github.com/ElemeFE/element
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-pickerpull/9437/head
parent
bbd69ea419
commit
aaf7a87848
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue