Autocomplete options not removable after hot reloading

[TormodNy]

Describe the bug

I am experiencing a bug where I cannot remove options from an autocomplete after hot reloading. There may also be other things that can cause this, but hot reloading seems to give me consistent failures.

The issue seems to be that it does not recognize that the clicked option is already selected, and tries to select it again. This is what onOptionsChange's selectedItems look like when I try to deselect option 0:

The bug may be related to how I handle the state. I am controlling the options with selectedOptions and onOptionsChange, but I do not have a state that directly stores the options. Instead, the selectedOptions are derived by filtering the options based on another state. I do not experience this bug when I have a state that directly represents the selected options, but for different reasons I don't want to do that.

I have also tried using the new itemCompare prop without any luck.

Steps to reproduce the bug

1. Open codesandbox
2. See that the autocomplete works as expected
3. Make an insignificant change to the code (such as adding a comment) and save to trigger hot reloading
4. See that it is no longer possible to remove selected options. However, it is still possible to add new options

Expected behavior

Autocomplete should work normally after hot reloading

Specifications

• Version: 0.39.0
• Browser: Chrome
• OS: Windows

Additional context https://codesandbox.io/p/sandbox/eds-autocomplete-bug-f5ncsw

[oddvernes]

This is quite an interesting bug! Is this scenario present in a real prod enviroment somehow, or is this limited to hot reloading in a dev enviroment?

[TormodNy]

I have only been able to reproduce it in my dev environment