fix(assignee-selector): split autofocus inp cost over multiple frames (#64165)

This PR reduces the INP impact of the autofocus react attribute by
deferring the focus event until next frame.

Calling [.focus](https://gist.github.com/paulirish/5d52fb081b3570c81e3a)
causes layout thrashing which causes UI jank. We are currently able to
observe this using browser profiling where a lot of the call stacks
point towards a .focus perf culprit.

![CleanShot 2024-01-30 at 09 29
07@2x](https://github.com/getsentry/sentry/assets/9317857/98e5b8dc-565c-4b3f-9106-5dcf032a46ef)

Having looked at prod profiles and react source, the function
responsible for calling .focus is
[commitMount](https://github.com/facebook/react/blob/2477384650bd184d3ac4a881130118f2636f8551/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L676),
called during a finalizeInitialChildren. I did not verify when exactly
this is called, but from the profiling data, this always appears to
always be the last function in the call stacks when committing changes
to the DOM.
 
The PR mitigates the sync nature of the .focus call by removing the
autofocus attribute and scheduling the autofocus to be performed in the
next browser event loop tick, yielding to the engine and splitting the
cost over two multiple browser frames.

Author: JonasBa

static/app/components/dropdownAutoComplete/menu.tsx

@@ -22,6 +22,26 @@ export type MenuFooterChildProps = {
 
 type ListProps = React.ComponentProps<typeof List>;
 
+// autoFocus react attribute is sync called on render, this causes
+// layout thrashing and is bad for performance. This thin wrapper function
+// will defer the focus call until the next frame, after the browser and react
+// have had a chance to update the DOM, splitting the perf cost across frames.
+function focusElement(targetRef: HTMLElement | null) {
+  if (!targetRef) {
+    return;
+  }
+
+  if ('requestAnimationFrame' in window) {
+    window.requestAnimationFrame(() => {
+      targetRef.focus();
+    });
+  } else {
+    setTimeout(() => {
+      targetRef.focus();
+    }, 1);
+  }
+}
+
 export interface MenuProps
   extends Pick<
     ListProps,
@@ -121,7 +141,7 @@ export interface MenuProps
   /**
    * Props to pass to input/filter component
    */
-  inputProps?: {style: React.CSSProperties};
+  inputProps?: React.HTMLAttributes<HTMLInputElement>;
 
   /**
    * Used to control the input value (optional)
@@ -343,13 +363,18 @@ function Menu({
               <StyledDropdownBubble
                 className={className}
                 {...getMenuProps(menuProps)}
-                {...{style, css, blendCorner, detached, alignMenu, minWidth}}
+                style={style}
+                css={css}
+                blendCorner={blendCorner}
+                detached={detached}
+                alignMenu={alignMenu}
+                minWidth={minWidth}
               >
                 <DropdownMainContent minWidth={minWidth}>
                   {showInput && (
                     <InputWrapper>
                       <StyledInput
-                        autoFocus
+                        ref={focusElement}
                         placeholder={searchPlaceholder}
                         {...getInputProps({...inputProps, onChange})}
                       />