search

GavinJoyce / ember-headlessui

https://gavinjoyce.github.io/ember-headlessui/
Other
92 stars 34 forks source link

`<Transition>` with `<Dialog>` breaks clicking the overlay to close #172

Open RobbieTheWagner opened 1 year ago

RobbieTheWagner commented 1 year ago

I noticed when perusing the examples today that the animation modal dialog example would not allow me to click outside of it to close the dialog. The non-animated one seems to work fine, and for the animated one if I remove the second <t.Child> it will also work.

I wonder if we need to pass different parents to the transition or something? This is a complex z-index type of issue, since the overlay is nested in one parent and the modal content is nested in another and there is some fixed positioning.

I've been trying to debug this for awhile, but cannot seem to find a workaround. Perhaps we could use something like https://github.com/zeppelin/ember-click-outside and put that modifier on the modal dialog content, instead of handling the click on the overlay?

I'm happy to explore this as a solution if folks think it would be good!

far-fetched commented 1 year ago

Good morning @rwwagner90 :wave:

Hmm I believe that with <Dialog> component everything is fine. So far, I recognized that one line in the example might be problematic:

https://github.com/GavinJoyce/ember-headlessui/blob/master/test-app/app/templates/dialog/dialog-modal-with-transition.hbs#L42

If you remove these 2 classes (seems that they are redundant) it should work.

PS: AFAIR we already put some effort to remove ember-click-outside, so not sure that folks want to revert it into repo :thinking:

RobbieTheWagner commented 1 year ago

@far-fetched if you remove those classes, won't there be no animations?

far-fetched commented 1 year ago

I am not an expert where we should apply transform or transition-all classes. But I found out that even in headless-ui library in examples they applied them in different places:

e.g. into <Transition/> component Menu component: 2022-12-17_15-23

e.g. into <Dialog/> component Dialog component:

2022-12-17_15-24

Regarding your question, I believe that animation still works as we apply the same classes a few lines later: https://github.com/GavinJoyce/ember-headlessui/blob/master/test-app/app/templates/dialog/dialog-modal-with-transition.hbs#L53