Open
Description
What is affected?
Accessibility, Component
Description
A validator using setCustomValidity as below will never cause an invalid event to be dispatched.
export class MyValidator extends Validator<any>{
private checkboxControl?: HTMLInputElement;
protected override computeValidity(state) {
if (!this.checkboxControl) {
this.checkboxControl = document.createElement('input');
this.checkboxControl.type = 'checkbox';
}
this.checkboxControl.setCustomValidity('Get rid of me');
console.warn('I should be invalid', this.checkboxControl.validity)
return {
validity: this.checkboxControl.validity,
validationMessage: this.checkboxControl.validationMessage,
};
}This is due to the Safari workaround here, causing the customError flag to always be false.
Otherwise new validators are great
Reproduction
https://lit.dev/playground/#gist=2fecd21c77070203e5472131ffc9b199
Workaround
Force an error on another flag, but this is not really nice:
protected override computeValidity(state: RecordState) {
if (!this.selectControl) {
// Lazily create the platform select
this.selectControl = document.createElement('input');
}
let customError = '';
if(state.currentDuration > state.maxDuration) {
customError = 'Recording is too long';
}
if(customError) {
// we force an error because validator [syncValidation] has a bug
// with customError
this.selectControl.value = '';
this.selectControl.required = true;
this.selectControl.setCustomValidity(customError);
} else {
this.selectControl.value = state.value;
this.selectControl.required = state.required;
}
return {
validity: this.selectControl.validity,
validationMessage: customError || this.selectControl.validationMessage,
// validationMessage: this.selectControl.validationMessage,
};
}
Is this a regression?
No or unsure. This never worked, or I haven't tried before.
Affected versions
Failing in v1.1.1
Browser/OS/Node environment
Latest chrome on linux
Metadata
Metadata
Assignees
Labels
No labels