[WIP] Add new isRequired prop that only marks invalid fields after first blur event
#5244
Conversation
- Passes required attribute (+ aria-required for accessibility) to child input/control only after first blur event (prevents required empty fields from showing as invalid immediately on page load)
- work with EuiValidatableControl OOTB, no changes needed
when isRequired is set and after the first blur event is passed back from the child input and the input is empty: - color label as invalid - add automatic error text
+ disable isRequired switch for components that don't support it
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5244/ |
cee-chen
force-pushed
the
form-isrequired
branch
from
ad30c14
to
ba5d233
Compare
|
jenkins test this |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5244/ |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5244/ |
| export const useIsRequired = ({ | ||
| controlEl, | ||
| isRequired, | ||
| }: { | ||
| controlEl: HTMLConstraintValidityElement | null; | ||
| isRequired?: boolean; | ||
| }) => { | ||
| const [hasBlurred, setHasBlurred] = useState(false); | ||
| const listenForBlur = useCallback(() => setHasBlurred(true), []); | ||
|
|
||
| useEffect(() => { | ||
| if (isRequired && controlEl && !hasBlurred) { | ||
| controlEl.addEventListener('blur', listenForBlur, { once: true }); | ||
| } | ||
| }, [isRequired, controlEl, hasBlurred, listenForBlur]); | ||
|
|
||
| return isRequired != null | ||
| ? { required: isRequired && hasBlurred, 'aria-required': true } | ||
| : {}; | ||
| }; |
There was a problem hiding this comment.
Would be more generic if it's useIsTouched instead and only returns a boolean to indicate if the input has been touched (blurred once). required and 'aria-required' props can then be determined in render cycles using useIsTouched.
This will also favor to expose a touched state of the input e.g. (and ideally on the parent form component too e.g.). Assuming we may need to implement that.
| optionalErrors = [ | ||
| <EuiFormErrorText | ||
| key="error-required" | ||
| id={`${id}-error-required`} | ||
| className="euiFormRow__text" | ||
| > | ||
| <EuiI18n | ||
| token="euiFormRow.requiredMessage" | ||
| default="This field is required." | ||
| /> | ||
| </EuiFormErrorText>, | ||
| ...(optionalErrors || []), | ||
| ]; |
There was a problem hiding this comment.
Would be great if the required error message is configurable, considering the consumer may want to show a custom error message, or no message at all but does want the invalid state.
Tip: State of all implicit errors could be exposed e.g
errors = {
required: true,
range: false
...
}
|
This would be a great addition. I do wish that we have the following states exposed on the form ref:
These are quite essential life cycle states of an average form and consumer need these to show/hide validation errors or to enable/disable form action buttons. Among these, |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5244/ |
|
👋 Hey there. This PR hasn't had any activity for 90 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment. |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_5244/ |
|
Still in my backlog to do 🙈 |
|
👋 Hey there. This PR hasn't had any activity for 90 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment. |
|
❌ We're automatically closing this PR due to lack of activity. Please comment if you feel this was done in error. |
Summary
This is a draft PR to get CI kicking and so I have an external URL to let people test with.
Please use this discussion for this PR: #5246
Checklist
- [ ] Check against all themes for compatibility in both light and dark modes- [ ] Checked in mobile- [ ] Checked Code Sandbox works for any docs examples- [ ] Checked for breaking changes and labeled appropriately