Make Select show error styling only if user has interacted

[andrewHEguardian]

What are you changing?

• Make the Select element only use the error styling if it is user-invalid (i.e. the user has interacted with it and it fails validation)

Why?

• If the Select element had the required attribute, it would be styled as an error before a user has even interacted with the form, as in the screenshot below.

[changeset-bot]

🦋 Changeset detected

Latest commit: 3c5a417

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Tip

Once this PR is ready to go, add the run_chromatic label to run the Chromatic tests.

This saves us a lot of money by not running the tests before we need them.

[GHaberis]

@andrewHEguardian does this mean if a user were to scroll past a required select field and hit submit the error state would not be shown because they didn't interact with the field?

[andrewHEguardian]

@andrewHEguardian does this mean if a user were to scroll past a required select field and hit submit the error state would not be shown because they didn't interact with the field?

An interaction with the form (ie submitting it) would also trigger the validation.

See this example

[GHaberis]

@andrewHEguardian does this mean if a user were to scroll past a required select field and hit submit the error state would not be shown because they didn't interact with the field?

An interaction with the form (ie submitting it) would also trigger the validation.

See this example

Excellent, thanks for clarifying and the example!

[GHaberis]

Looks good to me 👍