ModalDialog + Select - boundary behaviour

I am using ModalDialog with Select and Datetime picker components.

When Dateticker renders near the bottom of the viewport display perfectly - https://atlaskit.atlassian.com/packages/design-system/datetime-picker/example/boundary-behaviour

How to do it for Select component?

Currently after open Select the items are partially hidden and a scroll appears. The elements hides when you click on the scroll.

You can see it even without MOdalDialog on your example.


https://atlassian.design/components/select/examples

1 Like

Hi @TomaszRegdos, There is no way to control this behaviour as it goes against the Select UI model of opening the dropdown underneath the Select element. However usually the Select dropdown area will scroll into view so there would be no need to use the scroll bar. I wonder if the fact you are using it in Modal whether that is limiting the auto-scrolling behaviour.
We probably need to look into that.
Would you mind creating a bug ticket in our Service Desk here please - https://ecosystem.atlassian.net/servicedesk/customer/portal/24/group/69/create/330

Hi
Thank’s for your answer.

I found a solution to my problem. React-select has props menuPosition which can be set to fixed
https://react-select.com/props#select-props.