[select] Highlight doesn't highlight properly if an Option has the value null

[adamhylander]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/keen-david-z2r399?file=/src/Demo.tsx

The reproduction is taken from the docs.

Steps:

1. Open the first select
2. Press down-arrow key multiple times
3. Press up-arrow key multiple times

Current behavior 😯

Pressing the down-arrow key doesn't highlight anything but pressing the up-arrow key highlights normally excluding the null value. For the second select, pressing the down-arrow key only highlights the first option and the up-key can only highlight the bottom two options.

Expected behavior 🤔

Pressing either direction key should skip null value Options and highlight the first possible non-null value

Context 🔦

Found while testing

Your environment 🌎

This was done using Firefox Browser. For environment see linked codesandbox.io

[ZeeshanTamboli]

Seems like a bug. Also, the prop types warning for a null value shouldn't appear if we are supposed to support null as an option value. I also noticed it's broken in this demo: https://mui.com/base-ui/react-select/#selected-value-appearance.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@adamhylander How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.