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:

• https://github.com/facebook/react/issues/3926
• https://github.com/facebook/react/issues/8683
• https://github.com/downshift-js/downshift/issues/1108
• https://github.com/downshift-js/downshift/issues/1452
• https://github.com/zendeskgarden/react-containers/pull/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);