bug(tabs): Material Tabs ink bar moves to the wrong direction in RTL when drawer opens

[anisabboud]

trafficstars

Description

Tabs ink-bar moves to the wrong location in RTL, when toggling a drawer.

Watch the following GIF video, showing the entire code and behavior.

1. First it shows how everything works well in LTR.
2. Then it shows how switching dir to RTL makes the ink-bar jump incorrectly when toggling the drawer.

StackBlitz: https://stackblitz.com/edit/components-issue-po9bzs?file=src%2Fapp%2Fexample-component.html

Reproduction

Steps to reproduce:

1. Fork the official components StackBlitz: https://stackblitz.com/fork/components-issue
2. Copy-paste the following code into example-component.html.
3. Toggle the drawer, and watch the ink-bar's behavior. It jumps to the wrong location.

<mat-drawer-container dir="rtl">
  <mat-drawer #drawer mode="side" position="end">
    <p>Drawer content</p>
  </mat-drawer>

  <button mat-flat-button color="primary" (click)="drawer.toggle()">
    Click here (Toggle Drawer)
  </button>

  <mat-tab-group>
    <mat-tab label="First">Content 1</mat-tab>
    <mat-tab label="Second">Content 2</mat-tab>
    <mat-tab label="Third">Content 3</mat-tab>
  </mat-tab-group>
</mat-drawer-container>

Expected Behavior

ink-bar's position should be calculated differently when the document's direction is RTL.

Actual Behavior

ink-bar works well in LTR but not in RTL, when using drawers/sidenavs.

Environment

• Angular: 14.1.0
• CDK/Material: 14.1.0
• Browser(s): Chrome 103