bug: ion-menu containing an ion-accordion scrolls up every time the menu opens

[erikramalho]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

If we put a ion-accordion inside a ion-menu with a ion-split-pane app, the menu scrolls up every time you close and reopen the ion-menu. The ion-menu scroll up right after the event ionDidOpen finishes.

Expected Behavior

The ion-menu must keep the scroll postion. This behavior is seen if you put a ion-list + ion-item in a ion-menu.

Steps to Reproduce

Just create a side menu app (ionic start and side menu) and then place a multiple ion-accordion / ion-accordion-group. In the link provided,

1. open the menu, expand the accordion
2. scroll down the menu
3. click outside the menu to close it
4. reopen the menu: a scroll to top will happen.

Code Reproduction URL

https://stackblitz.com/edit/ionic-5-custom-ion-menu-button-jikmqz?file=src/app/tab1/tab1.page.html

Ionic Info

Ionic CLI : 6.18.1 (/node/v12.22.5/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.0.1
@angular-devkit/build-angular : 12.2.14
@angular-devkit/schematics : 12.2.14
@angular/cli : 12.2.14
@ionic/angular-toolkit : 5.0.1

Additional Information

No response

[averyjohnston]

Thanks for the issue, I'm able to replicate in both Angular and core. The bug triggers if you have at least one accordion in a menu. It doesn't trigger with just a list in the menu, but I saw it using just one accordion group with one accordion. It looks like the accordion's content can be anything; you don't necessarily need an ion-list anywhere.

[sean-perkins]

Additional context from #24660, this also appears to happen when the ion-menu content container has overflow scrolling. You can replicate in the conference app, by adding additional padding to the menu's content container and toggling the visibility of the menu. The menu's scroll position is always snapping back to the top.

In that example, it's also replicable with ion-list.

[sean-perkins]

Verified that this issue was introduced in #24076.

After the menu has finished animating, the menu will focus the immediate child element that matches this query selector:

[tabindex]:not([tabindex^="-"]), input:not([type=hidden]):not([tabindex^="-"]), textarea:not([tabindex^="-"]), button:not([tabindex^="-"]), select:not([tabindex^="-"]), .ion-focusable:not([tabindex^="-"])

This will either focus an accordion item, a routerLink or other focusable elements.

Ideally if we need to set the focus target, we should be preserving scroll position of the container.

[bashoogzaad]

I was wondering if there is any indication on when this will be fixed? If it would scroll to the active routerLink element it would not be a big problem. However, it scrolls to the highest routerLink in the menu, also when the active routerlink is in the bottom. This can be a bit confusing for our customers.

[JoeMeeks]

My workaround:

<ion-app>
	<ion-menu contentId="main" menuId="side" mode="ios" side="start" type="push" (ionDidOpen)="open()">

		<ion-content scroll-events="true" (ionScrollEnd)="scrolled()">

import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({
	selector: 'app-root',
	templateUrl: 'app.component.html',
	styleUrls: ['app.component.scss'],
})
export class AppComponent {

	@ViewChild(IonContent) content: IonContent;

	posY: number = 0;

	async open() {
		const el = await this.content.getScrollElement();
		requestAnimationFrame(() => {
			//raf required when menu is opened via swipe, otherwise scroll position only maintained from menu button taps
			//worked fine in Chrome but iOS requires setTimeout
			setTimeout(() => {
				el.scrollTo({ top: this.posY });
			}, 0);
		});
	}

	async scrolled() {
		const el = await this.content.getScrollElement();
		this.posY = el.scrollTop;
	}

[erikramalho]

Thanks @JoeMeeks but we need ionic to fix such a dumb thing… hey @amandaesmith3 any updates on it?

[moekify]

I think/hope it is related, but I'm experiencing the jumpy behavior on page transitions that do not involve the menu changing.

[averyjohnston]

@moekify Could you open a separate issue with a reproduction app? This issue is specifically for the menu scroll position jumping on close/reopen.

[moekify]

@moekify Could you open a separate issue with a reproduction app? This issue is specifically for the menu scroll position jumping on close/reopen.

Thanks for the swift reply! Before I do that, Is there a way I could test somehow if your open PR fixes the issue I'm experiencing?

[averyjohnston]

Sure thing, here's a dev build you can use: 6.0.15-dev.11649340483.1f8857c7 The change is entirely specific to ion-menu, though, so I wouldn't expect a difference in your app if the issue doesn't involve one.

[averyjohnston]

This has been resolved via #25044, and the fix will be available in a future release of Ionic 👍

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.