react-mdl-extra icon indicating copy to clipboard operation
react-mdl-extra copied to clipboard

Published 20 hours ago • verified publisher icon HriBB

Fix using 2 portals

Open jguffey opened this issue 7 years ago • 6 comments

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.

jguffey avatar Mar 28 '17 04:03 jguffey

@jguffey, Here are the bugs I found so far:

  • The dropdown doesn't collapse when it is onBlur
  • Doesn't work in any other browsers other than Chrome.

It is prompted:

  • TypeError: this.dialogDom.showModal is not a function[Learn More] bundle.js:49302:8
  • TypeError: root is null[Learn More] bundle.js:47327:1
  • TypeError: this.dialogDom.showModal is not a function[Learn More]

zhenyanghua avatar Apr 27 '17 04:04 zhenyanghua

@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?

jguffey avatar Apr 27 '17 17:04 jguffey

I am on a long vacation. Will merge when I get back in a week or so 😉 sorry for the delay.

HriBB avatar May 10 '17 23:05 HriBB

@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.

jguffey avatar May 11 '17 00:05 jguffey

The bugs with this PR seem to mostly be related to the use of the <dialog> component, which is not well supported outside of Chrome at this time. Using a polyfill should fix most of the issues @zhenyanghua pointed out. Personally I've had success with dialog-polyfill. One of my to-do items for this PR is to conduct more testing with this polyfill.

The other issue: "The dropdown doesn't collapse when it is onBlur", is also related to <dialog>. We want to detect a click on the pseudoelement ::backdrop, but according to this thread that approach may be troublesome in some browsers.

jguffey avatar May 11 '17 01:05 jguffey

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 ::backdrop problem explained in that thread I mentioned.

jguffey avatar Jun 07 '17 17:06 jguffey