auro-input Auro-input tooShort validity not working

[cleung0305]

Auro-input tooShort validity not working

2.14.1

Please describe the bug

expected:

1. Add auro-input in HTML, and set "minlength" to certain number.
2. Input something with length < minlength.
3. validity of element is 'TooShort'.
4. shadowRoot element has validity.tooShort: true.

actual:

1. Add auro-input in HTML, and set "minlength" to certain number.
2. Input something with length < minlength.
3. validity of element is 'valid'.
4. shadowRoot element has validity.tooShort: true.

Reproducing the error on the docsite

None

Expected behavior

see description above

What browsers are you seeing the problem on?

No response

Additional context

No response

[blackfalcon]

I was able to recreate this issue using the tests in the repo.

  it('minlength validity checked correctly', async () => {
    const el = await fixture(html`
      <auro-input maxlength="20" minlength="5" pattern="[0-9]{1,20}"></auro-input>
    `)

    el.value = 'a';
    await elementUpdated(el);
    expect(el.getAttribute('validity')).to.be.equal('tooShort');
    el.value = 'aaaaaaaaaaaaa';
    await elementUpdated(el);
    expect(el.getAttribute('validity')).to.be.equal('valid');
  });

This returned the following error

 ❌ auro-input > minlength validity checked correctly
      AssertionError: expected 'badInput' to equal 'tooShort'
      + expected - actual

      -badInput
      +tooShort

When I removed the pattern="[0-9]{1,20}" attribute, there was no issue with the code, and the test passed. It also should be noted that patterns are created in the element using the following code.

const pattern = new RegExp(`^${this.pattern}$`, 'u');

So the pattern you have in your element @cleung0305 may also be causing issues with this scenario as it's an invalid regex. @jason-capsule42 we should update the API docs to illustrate this fact.

@cleung0305 we are doing a lot of things with the pattern attribute, so it's easy to think that there is a clash between using pattern and minlength and not getting the proper return.

Thanks for this issue! The team will go over this ASAP.

[blackfalcon]

@Patrick-Daly-AA this issue is validated and ready to be addressed in the next available refinement session.

[jordanjones243]

@blackfalcon Taking on this work and looking over the ticket, does the tooShort validity trump the badInput?

[Patrick-Daly-AA]

Putting this in the backlog until we complete our refactoring of form validation, and determine the hierarchy of validation error states: AlaskaAirlines/auro-formvalidation#12

[Patrick-Daly-AA]

Engineering to make a decision on hierarchy of error states to show when multiple error states trigger.

[jordanjones243]

Ticket has been completed and merged into Beta.