Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Popover/Modal] Losing form state inside modal/popovers

See original GitHub issue

Hi there!

I’m not sure if this is an issue with popovers/modals being “removed” from the DOM vs hidden using CSS but I have a form inside a popover component and when the popover is closed and reopened, the form state inside is lost.

Apologies if this is something outside the scope here but it would appear that somehow the component is re-rendering and then perhaps losing state.

The Form is using react-hook-form in case that is of any relevance.

Issue Analytics

State:
Created 3 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

3reactions

segunadebayocommented, Jul 2, 2020

Hi @andregoldstein,

You’re right, this is because the Popover gets removed from the DOM. We’ve fixed this to use the hidden attribute so it remains in the DOM. As for the modal, we think it’s best to mount/unmount it from the DOM.

The fix is available in the v1.0.0-next.3 pre-release. We’re trying to get v1 out as fast as possible so you can start using it.

Cheers.

1reaction

andregoldsteincommented, Jun 5, 2020

@with-heart Hello! Thanks, will do!

Top Results From Across the Web

How to have a form in a modal behind a popover menu action

Had a similar situation but with the overlay over a modal. The answer was to use enforceModal prop to remove focus from the...

ion-popover - Ionic Framework

ion-popover is a dialog that appears on top of the current page. Learn about the popover UI component and CSS custom properties for...

JavaScript · Bootstrap

modal -backdrop to provide a click area for dismissing shown modals when clicking outside the modal. Via data attributes. Activate a modal without...

Popover | Components - BootstrapVue

The Popover feature provides a tooltip-like behavior, can be easily applied to any interactive element via the component or v-b-popover directive.

useOverlayTrigger – React Aria - React Spectrum Libraries

Note: useModal only hides content within parent OverlayProvider components. However, if you have additional content in your application outside any ...