Skip to content

Commit

Permalink
docs(useCombobox): cursor jump workaround (#1576)
Browse files Browse the repository at this point in the history
  • Loading branch information
silviuaavram committed Mar 3, 2024
1 parent a583281 commit 32d675d
Showing 1 changed file with 32 additions and 0 deletions.
32 changes: 32 additions & 0 deletions src/hooks/useCombobox/README.md
Expand Up @@ -593,6 +593,38 @@ The item that should be selected.
The value to be displayed in the text input.

馃毃 Important 馃毃

If you use `onInputValueChange`, `onStateChange` or anything similar in order to
update a state variable that will end up controlling `inputValue`, you will
encounter a
[cursor jump issue](https://github.com/downshift-js/downshift/issues/1108).
There's no way to properly fix this in our current `React.useReducer` setup, so
in order to work around the issue, consider the change below.

```jsx
const [value, setValue] = useState('')
const {getInputProps} = useCombobox({
items: [],
inputValue: value,
// change this:
onInputValueChange: ({inputValue}) => {
setValue(inputValue)
},
})

return (
<input
{...getInputProps({
// to this:
onChange: e => {
setValue(e.target.value)
},
})}
/>
)
```

### id

> `string` | defaults to a generated ID
Expand Down

0 comments on commit 32d675d

Please sign in to comment.