[Select] moving focus with keyboard ArrowUp or ArrowDown is not working when [disablePortal] is set (original) (raw)

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When I click into a <Select> (with disablePortal) the dropdown opens, but ArrowUp and ArrowDown will not move the keyboard focus to any of the items.
Addendum: I verified that the autoFocus property does not influence the behavior. It does not matter whether autoFocus is set or not.

Expected behavior 🤔

Without disablePortal the behavior is as expected: keyboard ArrowUp and ArrowDown keys will move the focus to the items and between the items.

Steps to reproduce 🕹

I prepared a codesandbox that exhibits the behavior
https://codesandbox.io/s/pensive-cache-xk9js4?file=/src/App.tsx

The relevant usage to elicit the bug is:

<Select MenuProps={{ disablePortal: true }}> {"foo"}

1. click into the select
2. use ArrowDown to move focus into the dropdown. but nothing happens.

Observation:
When disablePortal is set the dropdown paper will receive focus when the dropdown opens. This is not the case otherwise.

Context 🔦

No response

Your environment 🌎

No response