Composition events (Chinese, Japanese IME) problem in controlled SearchInput component

[cheton]

Description

Chinese characters entered via the Chinese Pinyin input method trigger excessive renders, as shown below in the "Keyword Search" example:

Note: This issue only occurred in v1. v0 does not have this problem.

Several related issues have been identified:

• Change event fires extra times before IME composition ends facebook/react#3926
• Composition Events(Chinese, Japanese IME) problem in controlled components(input, textarea) facebook/react#8683
• [useCombobox] Cursor jumps to end of input when using controlled value downshift-js/downshift#1108
• Japanese IME not working when controlling inputValue in useCombobox downshift-js/downshift#1452
• fix(combobox): handle IME via controlled input onChange override zendeskgarden/react-containers#588

Resolution

To resolve this issue, it's recommended to set the value immediately for controlled input or textarea, regardless of whether it's controlled or not.

   const onChange = useCallback((e) => {
     const nextValue = ensureString(e.target.value ?? '');
-    const isControlled = (valueProp !== undefined);
-
-    if (!isControlled) {
-      setValue(nextValue);
-    }
+    setValue(nextValue);