[Bug]: SearchBox autoFocus causes "Uncaught Error: Cannot call an event handler while rendering"

[StefanSchoof]

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 14.12 GB / 31.73 GB
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.19041.3636

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/p/devbox/modest-grothendieck-427cvn?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clvce95ll00072a6aea7l5krl%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clvce95ll00022a6at23c721z%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clvce95ll00042a6annzzbcdu%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clvce95ll00062a6a78ee76a7%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clvce95ll00022a6at23c721z%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvce95lk00012a6ah62tqs6y%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clvce95ll00022a6at23c721z%2522%252C%2522activeTabId%2522%253A%2522clvce95lk00012a6ah62tqs6y%2522%257D%252C%2522clvce95ll00062a6a78ee76a7%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvce95ll00052a6a5wida8rx%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clvce95ll00062a6a78ee76a7%2522%252C%2522activeTabId%2522%253A%2522clvce95ll00052a6a5wida8rx%2522%257D%252C%2522clvce95ll00042a6annzzbcdu%2522%253A%257B%2522id%2522%253A%2522clvce95ll00042a6annzzbcdu%2522%252C%2522activeTabId%2522%253A%2522clvdgf65a01hh2a6a0ipfeqyf%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvce95ll00032a6axczj3srk%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%252C%257B%2522id%2522%253A%2522clvdgf65a01hh2a6a0ipfeqyf%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clvdgf5t4001idiip3imucafl%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Bug Description

Actual Behavior

Having a <SearchBox autoFocus /> causes a Uncaught Error: Cannot call an event handler while rendering in the browser console (tested Chrome and Firefox). Without an autoFocus this error does not occur.

Expected Behavior

Can use the autoFocus feature and have no error.

Logs

@fluentui_react-components.js?v=2872f78e:1785 Uncaught Error: Cannot call an event handler while rendering
    at @fluentui_react-components.js?v=2872f78e:1785:11
    at @fluentui_react-components.js?v=2872f78e:1794:12
    at HTMLUnknownElement.callCallback2 (chunk-EI4XMCTB.js?v=2872f78e:3672:22)
    at Object.invokeGuardedCallbackDev (chunk-EI4XMCTB.js?v=2872f78e:3697:24)
    at invokeGuardedCallback (chunk-EI4XMCTB.js?v=2872f78e:3731:39)
    at invokeGuardedCallbackAndCatchFirstError (chunk-EI4XMCTB.js?v=2872f78e:3734:33)
    at executeDispatch (chunk-EI4XMCTB.js?v=2872f78e:7014:11)
    at processDispatchQueueItemsInOrder (chunk-EI4XMCTB.js?v=2872f78e:7034:15)
    at processDispatchQueue (chunk-EI4XMCTB.js?v=2872f78e:7043:13)
    at dispatchEventsForPlugins (chunk-EI4XMCTB.js?v=2872f78e:7051:11)

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[layershifter]

Repro link: https://stackblitz.com/edit/cjq6v4

Fix

fluentui/packages/react-components/react-search/src/components/SearchBox/useSearchBox.tsx

Lines 39 to 45 in a00c100

	const onFocus = useEventCallback(() => {
	setFocused(true);
	});
	const onBlur: React.FocusEventHandler<HTMLSpanElement> = useEventCallback(ev => {
	setFocused(!!searchBoxRootRef.current?.contains(ev.relatedTarget));
	});

Both useEventCallback() should be replaced with React.useCallback(), that's it 🐱

[Shubhdeep12]

Hi @layershifter thanks for the fix.

just want to confirm - since we are merging the callbacks later for onFocus and onBlur there can be custom events as well.

i think we should also make these also React.useCallBack because using useEventCallBack here will again throw the error.

fluentui/packages/react-components/react-search/src/components/SearchBox/useSearchBox.tsx

Lines 65 to 70 in 01a93ee

	{
	...rootProps,
	ref: useMergedRefs(rootProps?.ref, searchBoxRootRef),
	onFocus: useEventCallback(mergeCallbacks(rootProps?.onFocus, onFocus)),
	onBlur: useEventCallback(mergeCallbacks(rootProps?.onBlur, onBlur)),
	},

[layershifter]

i think we should also make these also React.useCallBack because using useEventCallBack here will again throw the error.

I would double check first, but it might be true.

[Shubhdeep12]

Sure,
I tried it locally.
It is causing the same error because of using useEventCallBack here in the render phase.