Log In button sometimes shows `cursor: not-allowed` when autofilled with a saved password

[lindapaiste]

p5.js version

No response

What is your operating system?

Windows

Web browser and version

Chrome 113.0.5672.93

Actual Behavior

cursor: not-allowed 🚫

This is extremely minor, but I've noticed an issue with the form state on the login page where it can sometimes show the wrong cursor when hovering the "Log In" button. It still works when I click it, but it looks as though it is not clickable. This corrects itself as soon as I click anywhere within the window. It only happens if I start directly on the https://editor.p5js.org/login page. Chrome autofills my username and password so the form is complete before the window is focused.

Expected Behavior

cursor: pointer 👆

I can't capture the cursor in my screenshots, but I also see that the text is not getting the correct CSS style in the auto-fill situation. Again, it fixes itself as soon as I click anywhere inside the window.

Steps to reproduce

Steps:

1. Save your login details using the Chrome password manager
2. Navigate directly to URL https://editor.p5js.org/login
3. Hover over the "Log In" button

[Vinyas-S]

Tried a whole lot of things to get it working,
Could you please point out if it's related to the react-final-form library, if that is the case the docs are all updated. @lindapaiste

[rajatmohan22]

I was actually looking for this issue. Wanted to raise it myself. It can be quite frustrating at times. I made several attempts to resolve it (you can check my commit history) and came to the realization that the problem lies in the coordination between React-DOM and Google Autofill.

It appears that when Google Autofill populates the form, React remains unaware of these changes, resulting in a failure to trigger a re-render.

Consequently, this leads to the value prop being initially set to null after a page refresh.

I think I've identified what appears to be the most effective solution. We can consider removing the condition that disables the value prop when the form is in a pristine state. It's worth noting that this approach remains safe since the form won't submit unless the user interacts with and fills out the fields.

[rajatmohan22]

@lindapaiste could you please review the PR?