[input] `validity` property does not update validityState values

[DitwanP]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

When trying to use the validity prop to read the validity state of an input, the validityState values always reads false

Example:

In the picture above the the console logs happen on blur.

• The first log is from clicking on the empty password field and clicking away. It's displaying false as expected because there isn't any input value to trigger a potential patternMismatch.

• The second log is after typing in only two characters which should trigger a pattern mismatch because the pattern requires at least 8 characters. It should be logging true for the the patternMismatch.

This is the behavior when using the validity prop:

const validity = password.validity;

console.log(`Password pattern mismatch?: ${validity.patternMismatch}`);

Expected Behavior

In the image above the log of the validity.patternMismatch is for the username is working as expected.

• The first log is from clicking on empty username input and then clicking away. It's displaying false as expected because there isn't any input value to trigger a potential patternMismatch.
• The second log is after typing in only two characters which is correctly logging true for the patternMismatch as the pattern requires at least 3 characters for the username.

I'm going against recommended practice in order to get the desired behavior by grabbing the input from within the shadowRoot:

const validity = username.shadowRoot.querySelector("input").validity;

console.log(`Username pattern mismatch?: ${validity.patternMismatch}`);

Reproduction Sample

https://codepen.io/Ditwan-Price/pen/OPyJaRr?editors=1011

Reproduction Steps

1. Open codepen
2. Click on username field
3. Click off username field without typing anything and notice the validation on blur kicks in
4. Click on username once more and type in less than 3 chars or more than 20 to trigger pattern mismatch
5. Note that the validation gets triggered as expected and the values logged are as expected
6. Repeat steps 2 through 4 on the password field
7. Note the validation is not triggered and the logged values are not as expected.

Reproduction Version

3.2.1

Relevant Info

Related to #7413, specifically to this comment #7413 (comment).

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)