Collapsed navigation does not scroll to top of dashboards from long pages

[ghudgins]

Describe the bug: When focus is on the bottom of a long page, navigating to a previously open dashboard does not reset you to the top

Steps to reproduce:

1. Use the observability new navigation
2. Collapse the navigation.
3. Open any dashboard
4. Navigate to Stack Management --> advanced settings.
5. scroll down to bottom of settings i.e. histogram:barTarget
6. navigate back to Dashboards

Expected behavior: See the dashboard

Actual behavior: See a gray screen (you are as far down the dashboard as you were in stack management)

Screenshots (if relevant):

Kibana version: 8.16 (pre-release, staging)

Elasticsearch version: 8.16 (pre-release, staging)

Server OS version: Elastic Cloud GCP

Browser version: Chromium Engine Version 130.0.6723.92

Browser OS version: macOS 14.7.1

Original install method (e.g. download page, yum, from source, etc.): Elastic Cloud

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[elasticmachine]

Pinging @elastic/appex-sharedux (Team:SharedUX)

[sebelga]

I can reproduce the issue. When we are on a page with a long scroll and we then open the collapsed nav, it positions itself in the DOM with a large top value. Once we click on a menu item and navigate anywhere else, as the menu is still opened it "pushes" everything down and makes the body much taller that it should.
If I manually delete the .euiPanel element in the DOM, the problem is fixed.
This behaviour is strange as the panel has a position: absolute which I thought should not affect the height of the body, but it does.

I will open a PR in eui to close the menu after clicking on a link. It should fix this issue.

cc @cee-chen in case you have some insight on why this is happening

[cee-chen]

@sebelga Is there a staging server or similar I can take a look at in the DOM? I suck at getting serverless running locally unfortunately 🙈

[sebelga]

@cee-chen You don't need to run serverless. Add this in your kibana.dev.yml

xpack.spaces.experimental.forceSolutionVisibility: true

Then edit the space and set a solution view (e.x. "Observability)
You will see the new nav

[cee-chen]

Thanks Sebastian, you're an hero! I agree (per your linked PR) that closing the popover on link click will fix this specific bug and is generally better UX.

I think this is also improvable on EUI's side of things, because as you can see when scrolling the long settings page with the popover open, it should be "fixed" to the nav toggle when it's not:

As such, I've also opened a small PR on EUI's side of things that adds the repositionOnScroll prop, which should fix both issues for pages with long content: elastic/eui#8141