[EuiSelectable] Scrolls page when autoFocus is set to true

[nickofthyme]

Describe the bug
When using EuiSelectable within an EuiPopover in an EuiFlyout in push mode when the body is set to scroll, enabling autoFocus on the searchProps results in a jump in the parent scroll.

Impact and severity
I would say this is a fairly common use case in kibana given the prevalent use of flyouts.

Related to elastic/kibana#201544

Environment and versions

• EUI version: latest

To Reproduce

1. Go to a kibana sample data dashboard
2. Enable edit mode
3. Scroll down near the bottom, not all the way
4. Click on the edit icon to edit a vis near the bottom
5. Click on the data view picker in the flyout
6. Notice the body element scrolls to the top when the input is focused

Screenshots

Zight.Recording.2025-01-21.at.12.56.29.PM.mp4

Additional context

I was able to repro the issue in codesandbox here. Note you must have the preview environment width enough the enable the push mode of the flyout.

A workaround to this is to manually focus the inputRef like eui is doing internally. But set the preventScroll option to true.

const Example = () => {
  function setInitialFocus(ref: HTMLInputElement | null) {
    ref?.focus({ preventScroll: true });
  }

  return (
    <EuiSelectable
      // other props...
      searchProps={{
        inputRef: setInitialFocus,
        autoFocus: false,
      }}
    />
  );
};

The strange thing is that the element is inside a nested scroll container (to flyout options) but is setting the scroll on the parent (body) element. I don't think it should care at all about the body scroll and maybe there is a way to prevent that while scrolling the closest scroll container. Maybe @elastic/eui-team knows more about why this is the case and has a better solution.

If no better ideas are voiced I think a we could simply allow autoFocus as a boolean or an object of focus options where specifying options is the same as true but with modifications. So something like this...

const Example = () => {
  return (
    <EuiSelectable
      // other props...
      searchProps={{
        autoFocus: { preventScroll: true },
      }}
    />
  );
};