bug: flip-rtl behavior isn't reactive when document dir changes

[FranciskoNeves]

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

v6.x

Current Behavior

When I change the app to RTL, the ion-back-button arrow doesn't instantly changes to RTL, I need to change to another page to see the change.

Expected Behavior

Right after change to RTL, the ion-back-button arrow turns 180 degrees.

Steps to Reproduce

Navigate to a page with an ion-back-button, change document.documentElement.dir to 'rtl' and you will see that the arrow doesn't change

Code Reproduction URL

https://github.com/FranciskoNeves/IonBackButtonRTL

Ionic Info

Ionic:

Ionic CLI : 6.20.3 (C:\Users\Francisco.neves\AppData\Roaming\nvm\v16.13.0\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.6.0
@angular-devkit/build-angular : 15.1.1
@angular-devkit/schematics : 15.1.1
@angular/cli : 15.1.1
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 4.6.1
@capacitor/android : not installed
@capacitor/core : 4.6.1
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 1.7.1

System:

NodeJS : v16.13.0 (C:\Program Files\nodejs\node.exe)
npm : 8.1.0
OS : Windows 10

Additional Information

No response

[averyjohnston]

Thank you for the issue. To shed some light on how this works, ion-back-button uses ion-icon internally, which has a property called flip-rtl. This says whether the icon should flip horizontally when RTL is enabled. Currently, this behavior is not reactive, meaning RTL status is only checked when the component is first loaded, such as when starting the app or loading a new page.

Can you give more details on your use case for changing to RTL mode dynamically like that?

[FranciskoNeves]

Ok, that explains the behavior of the ion-back-button.

My use case is simple, it's a settings page were the user can change the language (Arab is one of the option) of the app by selecting from a list displayed with ion-select componet, and then go back to home page clicking the ion-back-button, like the reproduction app that I posted here.

[averyjohnston]

Thank you, that makes sense to me. I'm going to move this to the Ionicons repo since that's where the origin of the issue is, and highlight it with the team internally so we can move things forward.

[mapsandapps]

Hi! Thanks for the report. Here's a dev build with a proposed fix if you'd like to test it:

npm install @ionic/[email protected] [email protected]