Skip to content

fix(menu): respect ion-app dir attribute for menu animation side#31246

Open
Arul1998 wants to merge 1 commit into
ionic-team:mainfrom
Arul1998:fix/menu-rtl-30226
Open

fix(menu): respect ion-app dir attribute for menu animation side#31246
Arul1998 wants to merge 1 commit into
ionic-team:mainfrom
Arul1998:fix/menu-rtl-30226

Conversation

@Arul1998

Copy link
Copy Markdown

Issue number: resolves #30226


What is the current behavior?

When dir="rtl" is set on <ion-app> (but not on document), the hamburger menu appears on the right side visually, but the open animation still slides in from the left. This happens because isEndSide() only checked document.dir, not the nearest ancestor dir attribute.

What is the new behavior?

  • isEndSide() now resolves RTL from the nearest ancestor with a dir attribute (e.g. <ion-app dir="rtl">), falling back to document.dir when none is found
  • Uses the existing isRTL() utility instead of custom logic
  • sideChanged() in ion-menu also passes the menu element so the side is correct before the first animation
  • Unit tests and an e2e test added for the ion-app dir="rtl" case

Does this introduce a breaking change?

  • Yes
  • No

Other information

@Arul1998 Arul1998 requested a review from a team as a code owner June 26, 2026 01:19
@Arul1998 Arul1998 requested a review from thetaPC June 26, 2026 01:19
@vercel

vercel Bot commented Jun 26, 2026

Copy link
Copy Markdown

@Arul1998 is attempting to deploy a commit to the Ionic Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added the package: core @ionic/core package label Jun 26, 2026
@Arul1998 Arul1998 force-pushed the fix/menu-rtl-30226 branch from 90d63e1 to ec6d84e Compare June 26, 2026 01:28
@github-actions github-actions Bot added package: angular @ionic/angular package package: vue @ionic/vue package package: react @ionic/react package labels Jun 26, 2026
Use isRTL with nearest ancestor dir lookup, fix sideChanged call site, and add unit/e2e tests for issue ionic-team#30226.
@Arul1998 Arul1998 force-pushed the fix/menu-rtl-30226 branch from ec6d84e to aec8b2d Compare June 26, 2026 01:56
@github-actions github-actions Bot removed package: angular @ionic/angular package package: vue @ionic/vue package package: react @ionic/react package labels Jun 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: when direction is RTL hamburger menu appears on right side but animation comes from the left

1 participant