search

codegouvfr / react-dsfr

🇫🇷 The Frech Government Design system React toolkit
https://react-dsfr.codegouv.studio
MIT License
403 stars 49 forks source link

PasswordInput + DSFR JS = 💔 #272

Closed revolunet closed 1 month ago

revolunet commented 1 month ago

While the PasswordInput works correcly in the storybook demo, the behaviour is buggy on this basic example.

Look like there is some react integration issues with the "native" DSFR JS here.

Indeed, when the component rerenders, it sets back the type to password as its not aware of DSFR DOM edits...

I'm thinking about reimplementing the toggle logic in the react-dsfr component.... WDYT ?

garronej commented 1 month ago

Hey @revolunet,

Let's maybe just make to component "use client"; what do you think? I've released @codegouvfr/react-dsfr@1.9.26-rc.0 so you can try it out.

revolunet commented 1 month ago

Still same issue : https://stackblitz.com/edit/nextjs-tsfl7d?file=app%2Flayout.tsx,app%2Fpage.tsx,package.json

garronej commented 1 month ago

Ok I've fixed it.
While bypassing the core DSFR logic seems tempting I made a rule of never doing that.
I don't want react-dsfr behavior to diverge in any way from @gouvfr/dsfr.
So when this type of scenario occurs, the solution is to observe the DOM and reconsile the state at the React level.

Thanks for reporting!

revolunet commented 1 month ago

Perfect thanks Sir 🙏