Ionic-framework: When app direction changed to RTL - menu side not changed

[MatanYadaev]

Resources:
Before submitting an issue, please consult our troubleshooting guide (http://ionicframework.com/docs/troubleshooting/) and developer resources (http://ionicframework.com/docs/developer-resources/)

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When i change app direction to rtl, the menu is in the same side

Expected behavior:
After changing app direction to rtl, change menu side to the opposite side

Steps to reproduce:

Related code:

insert any relevant code here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/home/matanyed/Dev/grame/node_modules)

    @ionic/cli-utils  : 1.9.2
    ionic (Ionic CLI) : 3.9.2

global packages:

    Cordova CLI : 7.0.1 

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.6.0

System:

    Android SDK Tools : 25.2.5
    Node              : v6.11.1
    npm               : 3.10.10 
    OS                : Linux 4.4

[AmitMY]

Only current fix is to have a variable on top of all of your views (in app.html) called for example allChanged, then when changing to RTL, also emit an event, catch it from the app.component, set allChanged = false, then detectChanges(), and then allChanged = true.
Either that, or a full page reload.

There is a PR open for it, but it will only be resolved after v4.

[kensodemann]

Hello! Thank you for opening an issue with us!

Given that we have a workaround and an open PR to fix this after the v4 release, I am going to close this issue for now.

@AmitMY - do you have a number handy for that PR to cross link here?

Thank you for using Ionic

[AmitMY]

I think this should be kept open, as it is an important open issue.
The PR is for v3, so not compatible with v4, but I do plan to rework it when the alpha releases with brandy most likely, so it will be working asap. I myself do a full page refresh when changing directions, as it is a very not usual use case.

PR: https://github.com/ionic-team/ionic/pull/11336

[kensodemann]

No problem. I can leave it open.

[mdashiff]

use this .....

app.component.ts

public menuSide : string ="right"; the menu side will be changed to right

[AmitMY]

@mdashiff That won't work if you want to change direction after the menu was initialized, unfortunately.
I have a fix for that, but it is not yet merged

[mdashiff]

@AmitMY isn't it? but for me, it is changed to the right side. but the transition effect alone is coming from left

[AmitMY]

@mdashiff When I said it won't work, I meant fully.
Correct, the main problem is that the animation is created once when the menu is created. My change was to create it whenever the side changes

[mdashiff]

You are correct @AmitMY when this will fix

[3adeling]

Hey guys, Any updates regarding the menu side issue?

[3adeling]

IMHO, this.platform.setDir("rtl", true) should do all the magic in the background. Changing menu's side manually is a little bit confusing.

[AmitMY]

Your opinion is the standard opinion. There was a fix for v3 that is now closed, I am in continuous contact with the devs on getting this done for v4 beta, hopefully, that will go as planned.

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/240