tabindex from Right to Left with Materialize

Question

I'm using Materialize v0.97.7 with Angular and Typescript I noticed when I change the direction to RTL and language to ar the tab index order still beginning from Left-to-right I tried to use tabindex="1",tabindex="2" ..... but it doesn't work. So why the tab order not changed to RTL and still starting from Left-To-Right, Although the Whole page, changed to RTL

HTML tags:

<form autocomplete="off" #createModal="ngForm" (ngSubmit)="save()">
    <h1 mat-dialog-title>Create New </h1>
    <mat-dialog-content style="width: 100%;height:100%;">
      <mat-tab-group>
        <mat-tab [label]="'GeneralInformation' | localize">
   <div class="row" >
              <div class="col-md-6" >
                <mat-form-field appearance="standard" >
                    <mat-label>{{ "governorates" | localize }}</mat-label>
                  <mat-select required [(ngModel)]="selectedCity"  tabindex="2"
                  placeholder='{{ "governorates" | localize }}'
                  name="governorate" id="governoratesSlct" (selectionChange)='fillMains($event.value)' >
                  <mat-option *ngFor="let governorate of listOfgovernorates" [value]="governorate.tenantId" >{{governorate.governorateName}}</mat-option>
                  </mat-select>
                </mat-form-field>   
              </div>
<div class="col-md-6" >
    <mat-form-field appearance="standard" >
        <mat-label>{{ "Mains" | localize }}</mat-label>
      <mat-select required  tabindex="1"
      placeholder="'Mains' | localize '"
      name="mainProjec" id="mainSlct" #singleSelect [formControl]="mainCtrl" >
      <mat-option>
        <ngx-mat-select-search [formControl]="mainFilterCtrl"  placeholderLabel="...ابحث عن المشروع ال" ></ngx-mat-select-search>
      </mat-option>
      <mat-option *ngFor="let main of filteredMains | async" [value]="main" >{{main.name}}</mat-option>
      </mat-select>
    </mat-form-field>
</div>

            </div>
<div class="row">
  <div class="col-md-4" >
    <mat-form-field>
        <mat-label>{{ "Status" | localize }}</mat-label>
      <mat-select  [(ngModel)]="sub.StatusId" required  tabindex="5"
      placeholder='{{ "Status" | localize }}'
      name="Status" id="StatusSlct">
      <mat-option *ngFor="let Staus of listOfStatuses" [value]="Staus.id" >{{Staus.StatusDescription}}</mat-option>
      </mat-select>
    </mat-form-field>
</div>

<div class="col-md-4" >
    <mat-form-field>
        <input tabindex="4"
          matInput
          name="subNumber"
          [placeholder]="'subNumber' | localize"
          [(ngModel)]="sub.subCode"
          type="text"
          required
          minlength="2"
          maxlength="255"
        />
      </mat-form-field>
    </div>

    <div class="col-md-4" >
      <mat-form-field >
          <!-- <mat-label>{{ "Sub" | localize }}</mat-label> -->
          <input 
            matInput tabindex="3"
            name="subName"
            [placeholder]="'subName' | localize"
            [(ngModel)]="sub.subName"
            type="text"
            required
            minlength="2"
            maxlength="255"
          />
        </mat-form-field>
  </div>
</div>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>
 <div mat-dialog-actions align="end">
      <button mat-button type="button" [disabled]="saving" (click)="close(false)">
        {{ "Cancel" | localize }}
      </button>
      <button
        mat-flat-button
        type="submit"
        flex="15"
        color="primary"
        [disabled]="!createModal.form.valid || saving">
       Save
      </button>
    </div>
  </form>

Answer 1

Actually what I did is using Flex-Layout("@angular/flex-layout": "^8.0.0-beta.26")

Note: if you use Angular 8 you MUST use above version of flex if you use Angular 9 you can use fles-layout 9 : I substitute each tag similar to below tag :

<div class="row">

with below one :

<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="3.5%" fxLayoutAlign="right">

After that, you don't need to use

tabindex=""

So, remove it.