[EuiSearchBox][React@18 Legacy Mode] useLayoutEffect in search_box (

#8047)
elastic · Sep 26, 2024 · 84a92d0 · 84a92d0
1 parent 780048c
commit 84a92d0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/eui/changelogs/upcoming/8047.md b/packages/eui/changelogs/upcoming/8047.md
@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed `EuiSearchBox` skips input when running with React 18 in Legacy Mode
+
diff --git a/packages/eui/src/components/search_bar/search_box.tsx b/packages/eui/src/components/search_bar/search_box.tsx
@@ -6,9 +6,8 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, useRef } from 'react';
+import React, { FunctionComponent, useRef, useLayoutEffect } from 'react';
 
-import { useUpdateEffect } from '../../services';
 import { useEuiI18n } from '../i18n';
 import { EuiFieldSearch, EuiFieldSearchProps } from '../form';
 import { EuiInputPopover } from '../popover';
@@ -39,7 +38,7 @@ export const EuiSearchBox: FunctionComponent<EuiSearchBoxProps> = ({
 }) => {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  useUpdateEffect(() => {
+  useLayoutEffect(() => {
     if (inputRef.current) {
       inputRef.current.value = query;
       inputRef.current.dispatchEvent(new Event('change'));