autofocus input in floating element will make window scroll to top

[SteveSuv]

Description

if a autofocus input or textarea in floating element , when floating element open, the window will auto scroll to top.

Code

import { useState } from "react";
import {
  useFloating,
  useInteractions,
  useClick,
  useDismiss,
  offset,
  flip,
  autoUpdate,
  shift,
} from "@floating-ui/react";

const App = () => {
  const [open, setOpen] = useState(false);

  const { refs, floatingStyles, context } = useFloating({
    open,
    onOpenChange: setOpen,
    middleware: [offset(4), flip(), shift()],
    whileElementsMounted: autoUpdate,
  });

  const { getReferenceProps, getFloatingProps } = useInteractions([
    useClick(context),
    useDismiss(context),
  ]);

  return (
    <div
      style={{
        textAlign: "center",
      }}
    >
      <div style={{ marginTop: "80vh" }} />

      <button ref={refs.setReference} {...getReferenceProps()}>
        click
      </button>

      {open && (
        <div
          ref={refs.setFloating}
          style={{ ...floatingStyles }}
          {...getFloatingProps()}
        >
          {/* if add autoFocus, when open is true, the window will auto scroll to top */}
          <input autoFocus placeholder="search" />
        </div>
      )}

      <div style={{ marginTop: "80vh" }} />
    </div>
  );
};

export default App;

GIF

[atomiks]

This is due to the browser focusing the input before the floating element was positioned (where it's at the top-left of the window initially). Use FloatingFocusManager instead to manage focus

[SteveSuv]

This is due to the browser focusing the input before the floating element was positioned (where it's at the top-left of the window initially). Use FloatingFocusManager instead to manage focus

Can you give a code example， I have tried to use FocusManager， but not valid，I don't know to pass what props，thanks

[atomiks]

import { FloatingFocusManager } from '@floating-ui/react';

Only takes these two props to work:

      {open && (
        <FloatingFocusManager context={context} modal={false}>
          <div
            ref={refs.setFloating}
            style={{ ...floatingStyles }}
            {...getFloatingProps()}
          >
            <input placeholder="search" />
          </div>
        </FloatingFocusManager>
      )}

https://codesandbox.io/p/sandbox/floating-ui-floatingfocusmanager-input-twzhgj?file=%2Fsrc%2FApp.js%3A16%2C1

[joelstein]

This is due to the browser focusing the input before the floating element was positioned (where it's at the top-left of the window initially). Use FloatingFocusManager instead to manage focus

Thanks for this! I was very confused why autoFocus was doing this.

@atomiks You might consider mentioning on the FloatingFocusManager docs page not to use the autoFocus prop.