Need help with select primitive

[adrian-novacescu]

Hi,

I am using select primitive in our project and noticed some issues that I am not sure how to overcome.

• If I use two or more selects with all options disabled, only for the first one the content is placed correctly. For all the others the content is placed on top left side of the screen
• If i create a select with some default options, open it, and then populate the options array (when the data is fetched from BE), the content jumps inside the screen
• I am using a custom scrollbar implemented as in the sample from select page. However, it works fine only with position 'item-aligned'. If I set the position to 'popper', the scrolling breaks.
• The select component displays the following error in browser console "react-dom.development.js:86 Warning: Updating a style property during rerender (overflowY) when a conflicting property is set (overflow) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.". I removed all my styles and got the same error.

I am looking forward to your responses/suggestions.

Thanks a lot,
Adi

[joaom00]

If I use two or more selects with all options disabled, only for the first one the content is placed correctly. For all the others the content is placed on top left side of the screen

Probably related to #1663

If i create a select with some default options, open it, and then populate the options array (when the data is fetched from BE), the content jumps inside the screen

I am using a custom scrollbar implemented as in the sample from select page. However, it works fine only with position 'item-aligned'. If I set the position to 'popper', the scrolling breaks.

Can you provide a minimal sandbox so I can look into it?

The select component displays the following error in browser console "react-dom.development.js:86 Warning: Updating a style property during rerender (overflowY) when a conflicting property is set (overflow) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.". I removed all my styles and got the same error.

You can do this #2059 (comment)

[joaom00]

Hi, thansk for the sandbox!

After 2 seconds, it will replace the options and the options list jumps on the right side.

I think the item-aligned doesn't take into account if the content size has changed. Given the complexity of positioning I don't know if it would be easy to support

just change the position to 'popper' and the scroll will break.

You need to set a height/max-height on Viewport to be able to scroll

.scrollAreaRoot {
  width: 100%;
  max-height: var(--radix-select-content-available-height, 100%);
}

[adrian-novacescu]

Hi, thanks for your reply.
I tested your suggestion and it works fine in the sandbox but is not working ok in our project. I had to set height to '-radix-select-content-available-height' but that broke the Select components with just few options. The content area height filled all available height instead of getting the size based on its content.

I will try to update the sandbox to reproduce this error. However, I am not able to do it in the next days/weeks. Would it be ok to follow up sometime in august/september?

Thanks again for all the help.

Best regards,
Adi

[adrian-novacescu]

Actually I found and forked a tailwind sandbox and managed to reproduce it.
The link is https://codesandbox.io/s/condescending-mclaren-zdtr5g.

Now on the right side Select, scroll is working but I had to set the height (Line 111 in Select.tsx). If I remove that, le left one will look OK (correct height) but the scrolling on the right one breaks.

Looking forward to your answer,
Adi.

[joaom00]

The max-height needs to be specifically in the Viewport and you can set any max-height it doesn't necessarily need to be --radix-select-content-available-height because as you saw it is the available height in relation to window.viewport

[adrian-novacescu]

Thanks a lot. I moved max-height on ScrollArea.Viewport and now it works as we want.
You are doing a great job and your support is fantastic!!!

[joaom00]

Thank you very much!