fix: do not preserve bad input on value property change (#5698) (#5703)

Co-authored-by: Sergey Vinogradov <mr.vursen@gmail.com>
vaadin · Mar 23, 2023 · 2aa1149 · 2aa1149
1 parent ae409a5
commit 2aa1149
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/time-picker/src/vaadin-time-picker.js b/packages/time-picker/src/vaadin-time-picker.js
@@ -630,8 +630,10 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
         this.__updateValue(parsedObj);
       }
     } else {
-      // If user input can not be parsed, keep it.
-      if (value !== '') {
+      // If the user input can not be parsed, set a flag
+      // that prevents `__valueChanged` from removing the input
+      // after setting the value property to an empty string below.
+      if (this.value !== '' && value !== '') {
         this.__keepInvalidInput = true;
       }
 

diff --git a/packages/time-picker/test/time-picker.test.js b/packages/time-picker/test/time-picker.test.js
@@ -68,11 +68,18 @@ describe('time-picker', () => {
       expect(timePicker.value).to.be.equal('');
     });
 
-    it('should propagate value to the inputElement', () => {
+    it('should propagate value property to the input element', () => {
       timePicker.value = '12:00';
       expect(inputElement.value).to.be.equal('12:00');
     });
 
+    it('should not preserve bad input on value property change', () => {
+      setInputValue(timePicker, 'invalid');
+      enter(inputElement);
+      timePicker.value = '12:00';
+      expect(inputElement.value).to.equal('12:00');
+    });
+
     it('should format input value consistently when committing same input value', () => {
       setInputValue(timePicker, '12');
       enter(inputElement);