Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

position of UiDatepicker not correct when combined with UiPopover/UiMenu #496

Open
sagg opened this issue Apr 8, 2020 · 1 comment
Open

position of UiDatepicker not correct when combined with UiPopover/UiMenu #496

sagg opened this issue Apr 8, 2020 · 1 comment

Comments

@sagg
Copy link
Contributor

sagg commented Apr 8, 2020

Hey,

we have a pretty rare use case (i assume) of UiDatepicker which is not working anymore in 1.3.0.
Please grab a coffee and sit down before you go on. :D

So..what we're doing:
In UiMenu's options-Slot we're passing (multiple) UiDatepicker, which is working fine in 1.1.0 how you can see here:
https://codesandbox.io/embed/keenui-uidatepicker-110-cy1j8
(Just click the button and click the only entry in UiMenu..ignore the strange looking css in this demo.)
UiDatepicker opens fine and after selecting a date UiMenu is still shown, exactly what we want.

If we upgrade this demo to 1.3.0, UiDatepicker is now positioned inside of UiMenu and not useable anymore:
https://codesandbox.io/embed/keenui-uidatepicker-130-gnzt1

I don't know if this should work..should it?

Thanks a lot!
@JosephusPaye
Copy link
Owner

That's a pretty interesting combination 😅.

It seems like your usage broke in v1.2.0 with the upgrade to Tippy.js 4.

You can get the datepicker to be positioned outside of the menu by adding the appendDropdownToBody prop:

<ui-datepicker append-dropdown-to-body label="datepicker" />

This will move the dropdown to <body>, displaying it out side of the menu.

However, this causes a date selection to close the menu (since the datepicker element is no longer a child of the menu, a click in it is considered an external click, which closes the menu's popover).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@sagg @JosephusPaye