adobe / adobe/react-spectrum

React warning thrown when attempting to reset a controlled async combobox.

Open
#3,153 2 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🐛 Bug Report

I'm using the second AsyncLoadingExample here https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#asynchronous-loading. I then add an action button with the intent of resetting the combobox:

```
{
list.removeSelectedItems();
list.setFilterText('');
}}> Reset
```

While this does clear the combobox, it produces the warning: `WARN: A component changed from controlled to uncontrolled.`.

## 🤔 Expected Behavior

There should be no warning.

## 😯 Current Behavior

```
react_devtools_backend.js:4026 WARN: A component changed from controlled to uncontrolled.
at ComboBoxBase (http://localhost:3000/static/js/bundle.js:55827:34)
at $2289f375e813f187$var$ComboBox (http://localhost:3000/static/js/bundle.js:55814:85)
...
```

## 💁 Possible Solution

?

## 🔦 Context

This is a minor inconvenience. I'm filing at the request of one of the Spectrum developers who said:

```
it's possible this might be a bug in useAsyncList/useListData, I'll need to dig some more. At the very least, removeSelectedItems shouldn't be throwing that warning it at all possible, mind filing an issue for this?
```

## 💻 Code Sample

https://codesandbox.io/s/falling-star-r9pf1z?file=/package.json

## 🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| react-spectrum | 3.17.0 |
| Browser | Chrome |
| Operating System | Mac |

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the warning with the second AsyncLoadingExample from the ComboBox documentation and the reset handler using removeSelectedItems and setFilterText. Read the useAsyncList/useListData behavior involved in the controlled async ComboBox, then verify the reset clears the component without a controlled-to-uncontrolled warning.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.