bug: Select (updated) position shifted

[blueskoo]

Reproduction URL (Required)

https://play.tailwindcss.com/YT1UUyaIf3

What version of daisyUI are you using?

5.1.6

Which browsers are you seeing the problem on?

Chrome

Describe your issue

New select component has two issues:

1. Select options positon shift when in absolute and tranlate class;
2. For large options, can't show all items when Select height not been shown fully

[github-actions]

Thank you @blueskoo for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

1. I'm not sure if I can do anything about that.
   Apparently the position of the top-layer dropdown menu is calculated relative from the original position of <select> without considering CSS transforms such as translate. Maybe it gets fixed in Chrome later on, maybe they keep this behavior.
   Workaround: If you have a -translate-x-1/2 class, use something like [&_.select::picker(select)]:-translate-x-1/2 to move the dropdown as well.

2. I'm not sure if I understood this one. In your example, the items don't fit and it has a scrollbar.
   Can you explain more please?
   What's the current behavior vs. expected behavior?

[kavika-1]

Hi @saadeghi, thanks so much for looking into this - to provide an example, in our case, we use a radix-ui portal to position a dropdown date picker on the right side of the screen under a date range field. the date picker has a component, but now the select drop down appears on the left side of the screen. After a quick investigation, indeed, it is because radix-ui does this: { position: fixed; left: 0px; top: 0px; transform: translate(821px, 109px); ... } Great library, thanks for your work!

[saadeghi]

In case you couldn't find a workaround for the position, disabling the new base-select style is an option:

<select class="select appearance-none">

Let me know if you have a question.

[blueskoo]

2. I'm not sure if I understood this one. In your example, the items don't fit and it has a scrollbar.
   Can you explain more please?
   What's the current behavior vs. expected behavior?

Hi @saadeghi , thanks for reply. Because of browser window size differ, I reproduce a tailwindplay page: https://play.tailwindcss.com/HcAs9jaHTF and a screen recod video link: https://assets.pagex.app/select-updated.mp4

The current behavior is: the select dropdown seems not be shown in full result in hiding some option items; expected whole dropdown could be fully shown.

Regards and thanks for your great work!