Skip to content

Commit

Permalink
Mark date inputs as valid when (partially) cleared (#1154)
Browse files Browse the repository at this point in the history
Chrome 83 has removed the clear button from date inputs, which means that there's now no way to clear a date field and have its validity state correctly updated.  Since the `oninput` event fired when the first date component is cleared provides an empty string as the new value, we can detect this and override `validity.badInput` to immediately update our validity state in order to avoid leaving the field permanently flagged as invalid.

Fixes #1153
  • Loading branch information
pauln authored Jun 12, 2020
1 parent d425f2e commit 8389416
Showing 1 changed file with 8 additions and 1 deletion.
9 changes: 8 additions & 1 deletion addon/components/paper-input.js
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,14 @@ export default Component.extend(FocusableMixin, ColorMixin, ChildMixin, Validati
});
this.growTextarea();
let inputElement = this.element.querySelector('input');
this.set('isNativeInvalid', inputElement && inputElement.validity && inputElement.validity.badInput);
let isNativeInvalid = inputElement && inputElement.validity && inputElement.validity.badInput;
if (this.type === 'date' && e.target.value === '') {
// Chrome doesn't fire the onInput event when clearing the second and third date components.
// This means that we won't see another event when badInput becomes false if the user is clearing
// the date field. The reported value is empty, though, so we can already mark it as valid.
isNativeInvalid = false;
}
this.set('isNativeInvalid', isNativeInvalid);
this.notifyValidityChange();
},

Expand Down

0 comments on commit 8389416

Please sign in to comment.