Text Input: __isInvalid attribute is not validated correctly on giving an invalid text to the text input field

[Subi1010]

Describe the bug

Text Input: __isInvalid attribute is not validated correctly on giving an invalid text to the text input field

I have given a pattern for mail id field and on giving an invalid value to the field, the __isInvalid is evaluating to false which is not correct as it should evaluate to true and vice versa.

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Environment

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context

Add any other context about the problem here.

[brian-patrick-3]

Would you mind copy/pasting your RegEx pattern, and some strings to test against?

[Subi1010]

Pattern: ^[a-zA-Z0-9.]+@kyndryl.com$ Valid Input: test@kyndryl.com,test1@kyndryl.com Invalid Input: test@kyn.com,test1@kyndryl.comy

[Subi1010]

This issue is across all Invalid check for the Text Input field. Not just for a pattern check, it exists during duplicate check as well for Text Input field.

[brian-patrick-3]

Does the error message show in the UI? _isInvalid is an internal property, so you should not be referencing it externally.

Our Storybook Docs page for Forms under Patterns has information about how to check and trigger native form validations.

[Subi1010]

No, the isInvalid property is referenced for an event to checkFormValidity.

[brian-patrick-3]

Using this pattern on the Text Input in our Storybook Patterns/Forms page, I can see the pattern mismatch error message in the UI on input, and it shows the message and focuses the input on clicking Submit (which executes document.querySelector('form').reportValidity()). This is functioning correctly.

Again, you should not be referencing the _isInvalid property externally (anywhere in your code) as it is an internal/private property. More information on Form Validation here: https://kyndryl-design-system.github.io/shidoka-applications/?path=/docs/patterns-forms--docs#validation

[Subi1010]

ok.......{ [element.name]: !element.isInvalid && element.value?.length > 0 }, Are we not allowed to access the isInvalid like this?

[brian-patrick-3]

ok.......{ [element.name]: !element.isInvalid && element.value?.length > 0 }, Are we not allowed to access the isInvalid like this?

Correct. It is not a public property. Properties that you can interface with are all documented in Storybook.

[Subi1010]

May I know what property can be used to check if a field is invalid given a pattern? Because I don't see any property in the list as invalidText is for custom use.

[brian-patrick-3]

May I know what property can be used to check if a field is invalid given a pattern? Because I don't see any property in the list as invalidText is for custom use.

There isn't one. You must use the HTML Constraint Validation API as I've previously mentioned, and linked to in our docs.