Can't pick second timezone in date picker menu "Timezones to display"

AI-generated summary

Can’t pick second timezone in date picker menu “Timezones to display”

eoin reported an issue where selecting a second timezone is not possible due to the dropdown being out of view. They provided a screenshot and a screen recording of the issue, which occurs on the latest Chrome on MacOS.

sam and Lilly were unable to reproduce the issue on their devices, with Lilly suggesting that the issue might be related to the modal layout, as the timezone selector appears below the date format in eoin’s screen recording, whereas it appears above on her devices.

sam believes the issue is related to select kit positioning and suggests migrating to popper-based positioning to render the dropdown above the box, allowing for more room to work with it. The issue has been labeled pr-welcome.

Hello,

With Insert date /time > Advanced mode > Timezones to display:

  1. Select one timezone, e.g. Paris
  2. Try to select a second timezone, by typing in “Dublin”

Expected: I can select a second timezone

Actual behaviour: I can’t select a seond timezone, the drop-down is out of view under the window.

Thank you.

1 Like

I am having trouble reproducing here (on Firefox Linux / latest)

What browser are you using?

Thank you. Latest Chrome on MacOS.

Here’s a screen recording.

i’ve tried on chrome and safari and i can scroll that screen up to get that dropdown that looks hidden in your view. it looks like it’s scrolling the background page in your screen-recording when you get to that particular drop down… :thinking:

why is your timezone selector below the date format? mine is above on both Meta and my site. something looks different with that modal.

i cannot seem to reproduce this on any of my devices or views…

1 Like

I think it is related to select kit positioning, we are opening the select kit underneath instead of on top of the box which leaves us very little room to work with it.

We need to migrate this to popper based positioning and render the “dropdown” above in this case.

Going to put pr-welcome on this in case someone has a chance to go down the rabbit hole.

1 Like