Skip to main content

Why does an input's placeholder disappear when I hover over it?

This can happen when an input's placeholder depends on the value of another input that lives in a different group. Hovering over the input causes the placeholder to disappear until the page is reloaded.

Written by Sofia Maconi

This can happen when one input's placeholder depends on the value of another input that lives in a different group. Hovering over the input whose placeholder references the other input's value causes the placeholder to disappear until the page is reloaded. This doesn't affect the input's actual functionality or any saved values.

What you might notice

  • An input's placeholder disappears when you hover over it

  • The placeholder only returns after refreshing the page

  • This happens specifically when the placeholder references the value of another input that's inside a different group

Workaround

  • Make the input's placeholder not depend on the value of the other input

  • Use a custom state on the page that updates when the referenced input's value changes, then set the placeholder to reference that custom state instead

  • Place both inputs inside the same group

Did this answer your question?