🐛 Cannot edit one's profile info - the modal closing with a click

[nsunami]

URL of the Page

https://www.researchequals.com/nsunami

What happened?

When I try to edit my information on the "Edit Profile" modal, the modal closes, and thus I cannot edit the profile.

https://github.com/libscie/ResearchEquals.com/assets/17035406/00175879-661b-425f-9ec2-89989f77f1d6

Steps to reproduce

1. Go to own profile
2. Open the Edit Profile modal by clicking the Edit Profile button
3. Click the Name field (or any other field)

What browser(s) did you use?

Chrome

Anything else?

No response

[chartgerink]

Thanks for reporting @nsunami 🙌 This is indeed an annoying bug that I've heard people complain about.

This is my current understanding - it happens whenever there are two entry points into the settings modal on a page. This means it happens from

1. the dashboard (onboarding quest + gear icon)
2. my profile page (edit profile + gear icon)

It might happen in other areas too. This is one of the downsides of having the modal and not a separate route for the settings (e.g., /settings/account and /settings/workspace).

[nsunami]

Hi @chartgerink 👋

I had a fresh look at this. I noticed that the modal state (isOpen) is managed by Recoil (useRecoilState()). Changing this back to the React's default useState seems to resolve the issue, since the state is now controlled locally to the component.

I wanted to know the reason why the Recoil is used here. Could you explain?