Preact: Component recycling problematic for username/password input elements

[AlexVallat]

Preact will recycle a component if it can, and I can find no supported way to disable this behaviour. This is causing a problem for username/password input elements. Chrome will correctly auto-fill a username/password pair. If, as a result of pressing a "login" button, for example, these components are then removed and a new set of components created which also happen to contain input elements for other purposes, the username/password components and input elements will be reused.

This results in Chrome believing they are the same input elements (which of course, technically, they are) and continuing to autofill the username and password into them. Even if they aren't even a password box any more (exposing the password as plaintext)

[marvinhagemeister]

Just an FYI: We have removed component recycling completely for the next major version. We don't have a time estimate for a release though.

[developit]

Yup. The workaround for now is this shim that disables recycling for a component:

https://gist.github.com/developit/fa084f3cb38778f93d58607377f416a3

[AlexVallat]

Ah, I didn't realise .__b could be relied on, so my workaround was to search all properties for one whose value was set to what .base used to be, and null that one! Thanks for confirming that it's on your radar for the next release.

[kevinfarrugia]

What is the exact difference between element recycling (which was removed in version 8) and component recycling? I couldn't find documentation on either and expected the above issue to have been solved in version 8.

[developit]

Element recycling: removed/unrendered DOM elements we placed into a pool for later re-use.

Component recycling: the last known DOM tree for removed/unrendered Components is placed into a pool and reused when a new instance of that component is mounted.

The reason this is taking a while to get out is because Preact's current renderer relies on Component recycling for performance. It was possible to avoid doing so, but it required rewriting the renderer (which we've now done).

[mingard]

Would it be correct to assume that if one were to creating a slightly modified version of the user/pass components, limiting their usage to the login form e.g.

<TextInputUser />
<TextInputPass />

The components would not be recycled?

[kevinfarrugia]

Would it be correct to assume that if one were to creating a slightly modified version of the user/pass components, limiting their usage to the login form e.g.

<TextInputUser />
<TextInputPass />

The components would not be recycled?

This had worked for us, but if you would use the same components on a forgot password form or a create account then you risk encountering the issue again.

Using the gist workaround posted by @developit worked well in all scenarios and personally I wouldn't recommend any other option.

[marvinhagemeister]

We just merged the code for our next version of Preact #1302 and have some good news: The component recycler is no more :tada: