-
Notifications
You must be signed in to change notification settings - Fork 854
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Dialog] force mounting dialog content makes the dialog open by default #998
Comments
We had a similar issue reported for this here #628. It might help shed some light on the thinking behind this prop. Although I'm curious, why are you wanting to hide the component with CSS instead? @benoitgrelard I wonder if we should rename the prop to something like |
Yeah I don't think the use case is valid considering what the prop is for. |
The name Our docs even imply this:
"When more control is needed" - for anything? My thinking with the rename is that it would explicitly communicate that it is only meant for deferring the unmount to something else to handle, as in, it should still be unmounted by something and not long-lived. |
Yeah so my use case was to keep some internal state as @jjenzz pointed in #628 but I'm using a third party (algolia) and it's kinda difficult with algolia connectors to lift the state and control it. The issue I encountered is that when dialog get unmounted the algolia filters connector cleans any applied filters (algolia/react-instantsearch#892) and I was thinking that So the issue I opened here was more like a question. Now that I got the answer, feel free to close it. |
Yeah perhaps a name change could help, just not sure to what cause it's confusing, as it's not really deferring unmount, it's just always mounted and up to the user to now mount/unmount correctly. So in my mind, |
Yeah, I think if it is possible to update the docs to reflect what indeed |
I am sorry guys, I got confused with |
@fgatti675 the i agree this @benoitgrelard in regards to this:
the confusion stems from the fact that we have two props that's why i proposed the |
We encountered this during development. Changing the prop as @jjenzz suggests, would only reduce confusion, but it would not address the scenario where you want the content of the dialog mounted (for any reason) but closed. We would find this useful because we have asynchronous content in the modal and we would like to prefetch it before the user clicks on the open button of the modal instead of let the user wait with a loading state. The easiest way to do this would be pre-mounting the component that does the fetch call but it doesn't seem possible at the moment. Is that correct? |
+1 for this, I have a carousel with some hefty images I need to preload within my Dialog. We can hack our way around the CSS but there should be a considered out-of-the-box approach for this feature (IMO). |
@paschalidi in the use case of Algolia I guess you have to have your custom refinements in the DOM because otherwise closing the Dialog would also kill the Algolia state from the url.
Basically you render all your refinements two times and just hide one via CSS so Algolia will maintain the search state because the Refinements are not unmounted at any point. |
For everyone dealing with Algolia, it has options to handle this case, see show and hide widgets
hope it helps |
Also +1 here, currently having an issue trying to display select options as an overlay instead of a popover. I want the component mounted, but don't want it to display or scrolllock my view. |
Bug report
Force mounting
DialogOverlay
andDialogContent
renders in the DOM the dialog and it is possible to control the visibility of the dialog with CSS but it also locks the scroll and traps the focus which makes the page unusable.Current Behavior
Force mounting
DialogOverlay
andDialogContent
in modal mode blocks the scrolling and traps focus.Expected behavior
Force mounting
DialogOverlay
andDialogContent
should work with scroll lock and focus trap the same way asforceMount=false
. So basically the dialog should control focus trap and scroll lock regardless offorceMount
option.Reproducible example
https://codesandbox.io/s/2oryx?file=/App.js
In this example I made the height of the body
200vh
for scrolling purpose. By default theforceMount
option is true and you can observe that it is impossible to scroll or click the button. The dialog is hidden with CSS using[data-state='closed']
selector. IfforceMount
is set to false, everything is working as expected.Suggested solution
I'm not sure if this is a bug or an intended behaviour. If it is intended, how the scroll lock and focus trap can be released programmatically?
Your environment
The text was updated successfully, but these errors were encountered: