From 7ef8930bc86d7e580f5adc07ad1be54a5f54c74d Mon Sep 17 00:00:00 2001
From: jbpenrath <jb.penrath@gmail.com>
Date: Fri, 25 Jul 2025 16:35:11 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20prevent=20input=20cursor?=
 =?UTF-8?q?=20to=20jump=20on=20searchable=20multi=20select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix an issue that cause the input cursor to jump when user
types in the search input of a multiple select.
---
 .changeset/clean-tips-dig.md                  |  5 ++++
 .../Forms/Select/multi-searchable.tsx         | 26 +++++++++++--------
 2 files changed, 20 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/clean-tips-dig.md

diff --git a/.changeset/clean-tips-dig.md b/.changeset/clean-tips-dig.md
new file mode 100644
index 0000000..e0ae5b7
--- /dev/null
+++ b/.changeset/clean-tips-dig.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+prevent input cursor to jump on searchable multi select
diff --git a/packages/react/src/components/Forms/Select/multi-searchable.tsx b/packages/react/src/components/Forms/Select/multi-searchable.tsx
index d165ee8..99dbaac 100644
--- a/packages/react/src/components/Forms/Select/multi-searchable.tsx
+++ b/packages/react/src/components/Forms/Select/multi-searchable.tsx
@@ -81,6 +81,20 @@ export const SelectMultiSearchable = ({ ref, ...props }: SubProps) => {
 
   const inputProps = downshiftReturn.getInputProps({
     ...useMultipleSelectionReturn.getDropdownProps({
+      onFocus: () => {
+        setHasInputFocused(true);
+        downshiftReturn.openMenu();
+      },
+      onBlur: () => {
+        setHasInputFocused(false);
+      },
+      onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+        // Synchronously update the input value
+        // This is important to avoid cursor jumping to the end of the input
+        // https://dev.to/kwirke/solving-caret-jumping-in-react-inputs-36ic
+        setInputValue(e.target.value);
+      },
+      size: 4,
       preventKeyAction: downshiftReturn.isOpen,
       ref: inputRef,
       disabled: props.disabled,
@@ -143,17 +157,7 @@ export const SelectMultiSearchable = ({ ref, ...props }: SubProps) => {
       useMultipleSelectionReturn={useMultipleSelectionReturn}
     >
       <span className="c__select__inner__value__input" data-value={inputValue}>
-        <input
-          {...inputProps}
-          onFocus={() => {
-            setHasInputFocused(true);
-            downshiftReturn.openMenu();
-          }}
-          onBlur={() => {
-            setHasInputFocused(false);
-          }}
-          size={4}
-        />
+        <input {...inputProps} />
       </span>
     </SelectMultiAux>
   );