search

keystonejs / keystone-classic

Node.js CMS and web app framework
http://v4.keystonejs.com
MIT License
14.65k stars 2.21k forks source link

PopOut doesn't work for items in modals #3262

Open wmertens opened 7 years ago

wmertens commented 7 years ago

When you have a createForm with a DateInput, it doesn't show a popup date, because the modal is at +2000 and for some reason PopOut can't find the correct offset to show the popup at.

wmertens commented 7 years ago

@mxstbr ?

wmertens commented 7 years ago

Ah the reason is that the Modal is position: fixed. Then you can't have an offset and the popout should be portaled in the modal.

jossmac commented 7 years ago

I can't reproduce, can you add more details?

image

wmertens commented 7 years ago

@jossmac I noticed this in the keystone-test repo, pretty far down the page. I assume that if you are at the top, it's not a problem.

wmertens commented 7 years ago

err sorry I'm mixing up repos. It's our own project, and the relationship field is quite far down. Try scrolling down the page as low as you can to click the create?

wmertens commented 7 years ago

I think the only sane solution is to implement the modal with position: absolute.

In compliance with the specification, this property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed". -- https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent

jossmac commented 7 years ago

@mxstbr can you reproduce this?

wmertens commented 7 years ago

@jossmac @mxstbr to repro go to Events in Keystone-test, use the devtools to make your screen super short, scroll down and click on Create.

Result: image

jossmac commented 7 years ago

Thanks @wmertens!

wmertens commented 7 years ago

I was able to fix it in devtools by making the modal div position: absolute, giving it a height and setting the top to the scrollposition of the main window. That latter is the tough bit I guess.

wmertens commented 7 years ago

@jossmac any progress on this? I noticed that https://github.com/reactjs/react-modal is using absolute as well, any reason why we're not simply using that? More eyeballs, accessible etc…

jossmac commented 7 years ago

@wmertens happy for you to implement https://github.com/reactjs/react-modal. Just make it look/behave identical to current implementation