Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Validator do not allow customError #5302

Open
christophe-g opened this issue Dec 15, 2023 · 2 comments · May be fixed by #5310
Open

Validator do not allow customError #5302

christophe-g opened this issue Dec 15, 2023 · 2 comments · May be fixed by #5310
Assignees
@christophe-g

Comments

@christophe-g
Copy link
Contributor

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
@christophe-g christophe-g changed the title Validator no not allow customError Validator do not allow customError Dec 15, 2023
@asyncLiz
Copy link
Collaborator

I think this could be supported by changing this line in the constraint validation mixin to also check the Validator's computed custom error:

const customError = !!this[privateCustomValidationMessage] || validity.customError;

Calling myControl.setCustomValidity('user-set error') would then override any custom errors the control set for itself.

Want to send in a PR?

@christophe-g
Copy link
Contributor Author

christophe-g commented Dec 15, 2023 •
edited

Want to send in a PR?

Yep, Will send one early next week.

christophe-g added a commit to christophe-g/material-web that referenced this issue Dec 18, 2023
@christophe-g
fix(validator): validator report customError. Fix material-components…
d19e809 
…#5302
@christophe-g christophe-g linked a pull request Dec 18, 2023 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@christophe-g christophe-g

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(labs): allow validators to report customError christophe-g/material-web
2 participants
@christophe-g @asyncLiz