bug: In a Sidemenu app, menu doesn't expand when direction of app is changed from LTR to RTL in desktop and tablet.

[shahramSo]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

When I change direction of app from LTR to RTL in runtime, Sidemenu doesn't expand on desktop and tablet mode.
on the other hand, Menu is changed but is not expanded.

Expected behavior:

In ionic 4 this behavior works fine for me but on Ionic 5, Sidemenu is changed but , it doesn't expand, so when I change direction form LTR to RTL or vice versa, Sidemenu will be closed.
But if the app reloads, side menu works fine. I expect the Sidemenu be expanded when app direction be changed at runtime.

Steps to reproduce:

Simply, I create an ionic 5 project for a Sidemeu app and I create a method to change of app direction by button click.

Related code:

setRtl(langTag) {
    if (langTag) {
      if (langTag == "fa") {
        document.documentElement.dir = "rtl";
      }
      else {
        document.documentElement.dir = "ltr";
      }
      document.documentElement.lang = langTag;
    }
  }

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.11.8 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.3
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res : 0.15.1
   native-run  : not installed

System:

   NodeJS : v12.16.0 (/usr/local/bin/node)
   npm    : 6.14.8
   OS     : macOS Catalina

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[shahramSo]

I have created two simple Sidemenu by Ionic 5 in Stackblitz as follows:

1. app with 2 Sidemenus which is controlled by ngIf to change menus from LTR to RTL or vice versa.
   in this solution, menus is changed correctly for mobile mode but not for desktop and tablet.
   in desktop and tablet, menu is not expanded after change of direction.
   for your info this solution works form me in Ionic 4.
   project address: https://stackblitz.com/edit/ionic-v5-angular-sidemenu-refresher-ubkpuf?file=src%2Fapp%2Fapp.component.html

2. app with one normal Sidemenu witch is controlled by a method to change menus from LTR to RTL or vice versa.
   in this solution, menus is changed correctly for desktop and tablet but not for mobile.
   in fact, sidemenu is changed but always it is opened from the left until the app is reloaded. so I expected to change it at runtime.
   Project address: https://stackblitz.com/edit/ionic-v5-angular-sidemenu-refresher-y84sjd?file=src%2Fapp%2Fapp.component.html

Please check them and let me know if you need further info.

[shahramSo]

I found a workaround with 2 Sidemenus which is controlled by ngIf to change menus from LTR to RTL or vice versa.
But I used ngIf in ion-split-pane, it means that I created 2 ion-split-pane which is controlled by ngIf, so it will be solved my needs.
Project address: https://stackblitz.com/edit/ionic-v5-angular-sidemenu-refresher-j4jkz7?file=src%2Fapp%2Fapp.component.html
I think may be useful for every one works by RTL direction.
But I will wait to solve this issue by Ionic team.

[salem]

this bug occurs in every new ionic version3,4 and now in 5. what ionic team is doing?

[shadowzack]

I have the same problem still not fixed until now

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of #19489. The issue here is that the animation that shows/hides the menu is a) not RTL-aware and b) not reactive, so changing LTR/RTL modes on the fly will not update the animation.

[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.