From 32d675d660020001154505cf49c53fa9c36ff0e7 Mon Sep 17 00:00:00 2001
From: Silviu Alexandru Avram <silviu.avram91@gmail.com>
Date: Sun, 3 Mar 2024 15:13:37 +0200
Subject: [PATCH] docs(useCombobox): cursor jump workaround (#1576)

---
 src/hooks/useCombobox/README.md | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/hooks/useCombobox/README.md b/src/hooks/useCombobox/README.md
index d60a8697..299e6a59 100644
--- a/src/hooks/useCombobox/README.md
+++ b/src/hooks/useCombobox/README.md
@@ -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