[Dashboard/Lens] Fix scroll jumping when editing from flyout (elastic…

…#207429)

## Summary

Fixes an issue that caused the body scroll to jump when clicking options
in the Lens inline editor flyout.

Fixes elastic#201544

This issue was created when we added the `autoFocus` option to the
`EuiSelectable` for the dataview picker and the chart type picker.

This appears to be an issue with how eui is handling the `autoFocus`,
see elastic/eui#8287.

In the meantime this is a workaround to prevent this scroll jumping
while also keeping the auto focus behavior.

https://github.com/user-attachments/assets/94256fa7-f6bd-4943-91f6-42201ce4ab74

### Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

## Release note

Fixes and issue in Dashboards with the Lens inline editor where the
dashboard would scroll to the top when interacting with the Lens editor
flyout.

---------

Co-authored-by: Marta Bondyra <[email protected]>
(cherry picked from commit a4089b1)

src/plugins/unified_search/public/dataview_picker/dataview_list.tsx

@@ -151,9 +151,12 @@ export function DataViewsList({
       searchProps={{
         id: searchListInputId,
         compressed: true,
-        autoFocus: true,
         placeholder: strings.editorAndPopover.search.getSearchPlaceholder(),
         'data-test-subj': 'indexPattern-switcher--input',
+        autoFocus: false, // focused manually below - see https://github.com/elastic/eui/issues/8287
+        inputRef: (ref) => {
+          ref?.focus({ preventScroll: true });
+        },
         ...(selectableProps ? selectableProps.searchProps : undefined),
       }}
     >

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/chart_switch/chart_switch_popover.tsx

@@ -38,6 +38,7 @@ export const ChartSwitchPopover = memo(function ChartSwitchPopover(
         initialFocus=".lnsChartSwitch__popoverPanel"
         panelClassName="lnsChartSwitch__popoverPanel"
         panelPaddingSize="none"
+        repositionOnScroll
         button={
           <ChartSwitchTrigger
             icon={icon}

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/chart_switch/chart_switch_selectable.tsx

@@ -47,7 +47,10 @@ export const ChartSwitchSelectable = ({
       height={computeListHeight(props.options as SelectableEntry[])}
       searchProps={{
         compressed: true,
-        autoFocus: true,
+        autoFocus: false, // focused manually below - see https://github.com/elastic/eui/issues/8287
+        inputRef: (ref) => {
+          ref?.focus({ preventScroll: true });
+        },
         className: 'lnsChartSwitch__search',
         'data-test-subj': 'lnsChartSwitchSearch',
         onChange: setSearchTerm,

x-pack/plugins/lens/public/shared_components/dataview_picker/dataview_picker.tsx

@@ -46,6 +46,7 @@ export function ChangeIndexPattern({
       panelProps={{
         ['data-test-subj']: 'lnsChangeIndexPatternPopover',
       }}
+      repositionOnScroll
       isOpen={isPopoverOpen}
       closePopover={() => setPopoverIsOpen(false)}
       display="block"