Fix using 2 portals#18
Fix using 2 portals#18jguffey wants to merge 7 commits intoHriBB:masterfrom jguffey:fix-using-2-portals
Conversation
I had a similar use case on a project in the past, so I think it would be useful to have a dropdown that acts as a button. Mostly it's just an example of what one can do with this library, but it might not be immediately apparent how to create one of these. I also added `yarn.lock` to the .gitignore for those of us that want to use yarn.
… default MDL menu components
Needs to be cleaned up before PR. 1. Because only <dialog> can be displayed over a <dialog>, we must render the menu list within a <dialog> 2. Various compolications with Portal, because of 1. we must also preserve Poral. This also perserves all other benefits of using this over mdl-react 3. Portal passes props.closePortal implicitly, thus we need DialogWrapper component to accept and pass this prop to children. This seems to be working, I need to do more tests and complete the following items: To do: 1. Split DialogWrapper into it's own file 2. Test cross browser
Create a more designed Menu Dropdown Button
|
@jguffey, Here are the bugs I found so far:
It is prompted:
|
|
@zhenyanghua true. @HriBB this project hasn't been updated in some time. If I can get this PR up to spec (passing use case tests that zhenyanghua pointed out, would you be interested in merging this PR? |
|
I am on a long vacation. Will merge when I get back in a week or so 😉 sorry for the delay. |
|
@HriBB Oh! Thanks for checking in, in that case I'll try to address some of the issues @zhenyanghua brought up. I've been using this lib in production, but there are a few issues still holding it back. |
|
The bugs with this PR seem to mostly be related to the use of the The other issue: "The dropdown doesn't collapse when it is onBlur", is also related to |
HriBB
left a comment
HriBB
left a comment
There was a problem hiding this comment.
I tried your PR locally and it breaks all my menu demos in storybook. Positioning is broken and I cannot close menu by clicking outside. But menu opens correctly in dialog. If you can fix the code so that positioning and closing works.
|
It even breaks other demos? Thanks for checking, I'll look into that. Clicking outside to close a Portal is a known issue, one I'm not entirely sure how to solve and may not be solvable given the |
4 participants
Fixes #8,
ToDo:
[ ] Clicking outside of the Menu should close the Dropdown Dialog.
[ ] Test with a dialog Polyfill
I had to nest the open menu within another
<dialog>element, as the browser will not position anything over an open<dialog>, except for another open<dialog>.Feedback is appreciated.