Add popper.js behavior for Select dropdown

[Kukkimonsuta]

Package: @mantine/core

When select appears on bottom of the page the dropdown is shown outside of viewport.

As discussed on discord this is non-trivial and has accessibility implications.

[318097]

Please do this. Mantine is the most perfect UI library but only auto-positioning of the dropdown is missing.

[rtivital]

@318097 this is a pretty complex issue due to usability, I'm busy with other things right now so I'll be waiting for someone from community to work on this

[achmurali]

Hi @rtivital , I can have a look on this.

[rtivital]

@achmurali there are several things to consider:

• Dropdown should always have the same width as input element – you may need a ResizeObserver or to modify existing Popper component to support that. I did not research this but it should be possible with popperjs.
• Since dropdowns will not be rendering in current context you will need to implement different click outside behavior to make it work within Modal, Drawer, Popover, etc. You'll need to get it working from scratch as currently there is no click outside behavior (everything is managed with focus)
• When Popper position changes from bottom to top you will need to
  • Reverse items order
  • Reverse scroll direction (last item should be selected initially, moving to first item with arrow keys)

[muco-rolle]

@achmurali are you working on this? I would like to help.

[rtivital]

@muco-rolle it's a hard issue, I would not recommend working on this, I'll work on it myself when time comes

[rtivital]

Released in 3.2