[Bug] Fix popover inside settings dialog #2822
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
arielj
requested review from
a team,
flavioislima,
CommandMC,
Nocccer and
imLinguin
and removed request for
a team
arielj
commented
Jun 24, 2023
| max-width: 500px; | ||
| overflow-y: auto; | ||
| overflow-x: hidden; | ||
| position: absolute; |
There was a problem hiding this comment.
this is only adding these last 2 props and the relative for the parent
arielj
commented
Jun 24, 2023
| } | ||
| // add a click listener to close the popover when clicking outside | ||
| const callback = (event: MouseEvent) => { | ||
| if (!wrapper.current!.contains(event.target as HTMLElement)) { |
There was a problem hiding this comment.
if clicked outside the wrapper, close the popover
arielj
commented
Jun 24, 2023
| const handleClose = () => { | ||
| setAnchorEl(null) | ||
| } | ||
| return () => { |
There was a problem hiding this comment.
when the popover is closed, remove the listener
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR fixes an issue where the popover component was not visible when used inside a modal.
Because of how the MaterialUI
Popovercomponent works, it was added to the document body, and it was always behind thedialogelement and it was impossible to bring it to the front.I tried many options of the Popover component to put it inside the dialog which partially fixed this but then the positioning was broken.
At the end I decided to go with a simpler solution implementing a similar functionality to have more control and to avoid all the weird things the MUI component was doing (adding styles, extra elements, scrolling the container, etc).
I tried this in:
installation informationtime informationetc links in the game pageI think I covered all the places but please let me know if something looks wrong.
An example of this working where it was not working before:
Use the following Checklist if you have changed something on the Backend or Frontend: