Inconsistent validation behavior and delayed focus/submit issues

[DarkstarXDD]

Sandbox: https://codesandbox.io/p/sandbox/jgrpwx

I have created a simple abstraction for a TextField component using React Aria Components. That component code is in the text-field.tsx file.

I then use that component in the App.tsx in a simple form setup. Both the fields are marked isRequired.

I am facing two issues.

Issue 01. (This issue is inconsistent and only happens sometimes)
Scenario: Enter an invalid email (eg: "abcd") to the email field, leave the password field empty, and click on the submit button.

What should happen: As soon as i click on the submit button, both email and password fields should be marked as invalid, error messages should appear for both fields, and the email field should receive the focus.

What happens: Only the email field is marked as invalid and only the email error message is displayed. Focus is NOT placed on the email field. Only if i click on the submit button the second time it will mark both the fields as invalid and move the focus to the email field. As i said this only happens sometimes and sometimes on the first click on the submit button it works as expected.

Issue 02.
Scenario: Get both the text fields into invalid states where the error messages are displayed. Then, enter valid values for both the fields and click on the submit button without clicking anywehere else on the screen.

What should happen: Form should submit.

What happens: The fields get validated and the error messages go away but the form won't submit. Only on the second click on the submit button, the form will be submitted. So basically i have to click one time to validate the fields and then the second time to submit the form. Which is not a good experiecne for the user.

I am not sure whether this is a bug or some mistake i have done in my setup that is causing the issue. That's why i made the post in the discussion section rather than on the issues section. If it's something wrong in my setup please point it out. Thanks a lot!

[snowystinger]

Thanks for the discussion.

I'm unable to reproduce #1.

As for #2, it seems to be because the error messages being removed is causing substantial shift in layout. I stabilised it a bit here https://codesandbox.io/p/sandbox/jgrpwx and we can see the submit works. I'd try to minimise the amount of layout shift, it'll help all users.

[DarkstarXDD]

@snowystinger Thanks for taking a look. So for #2 the issue is when i click on the button when a field is in the error state, it triggers the onBlur for the field. That validates the field and removes the error message, causing the layout shift. Because of the layout shift the click will actually happens outside of the button's current position. Is that right?

Also yeah i agree about layout shift with the error messages can be annoying to user's as well. I will avoid it, so that all the elements stay in same postion no matter whether the error messages are present are not.

One more thing, did you edit my original sandbox (i don't know whether it's possible to do so or not) or did you fork it and made the changes? Because what you have shared is the link to my original sandbox and when i open it i don't see any changes. I wanted to see the changes you have made.

Thanks again!

[snowystinger]

Hmm I thought I had forked and saved it, but maybe I messed that up. I can do set it up again tomorrow.