fix(autocomplete): panel direction not being updated if the trigger direction changes (#10916)

Author: crisbeto

src/lib/autocomplete/autocomplete-trigger.ts

@@ -498,8 +498,9 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
         });
       }
     } else {
-      /** Update the panel width, in case the host width has changed */
+      // Update the panel width and direction, in case anything has changed.
       this._overlayRef.updateSize({width: this._getHostWidth()});
+      this._overlayRef.setDirection(this._getDirection());
     }
 
     if (this._overlayRef && !this._overlayRef.hasAttached()) {
@@ -524,7 +525,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
       positionStrategy: this._getOverlayPosition(),
       scrollStrategy: this._scrollStrategy(),
       width: this._getHostWidth(),
-      direction: this._dir ? this._dir.value : 'ltr'
+      direction: this._getDirection()
     });
   }
 
@@ -541,6 +542,10 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
     return this._positionStrategy;
   }
 
+  private _getDirection() {
+    return this._dir ? this._dir.value : 'ltr';
+  }
+
   private _getConnectedElement(): ElementRef {
     return this._formField ? this._formField.getConnectedOverlayOrigin() : this._element;
   }

src/lib/autocomplete/autocomplete.spec.ts

@@ -470,6 +470,30 @@ describe('MatAutocomplete', () => {
     expect(overlayPane.getAttribute('dir')).toEqual('rtl');
   });
 
+  it('should update the panel direction if it changes for the trigger', () => {
+    const dirProvider = {value: 'rtl'};
+    const rtlFixture = createComponent(SimpleAutocomplete, [
+      {provide: Directionality, useFactory: () => dirProvider},
+    ]);
+
+    rtlFixture.detectChanges();
+    rtlFixture.componentInstance.trigger.openPanel();
+    rtlFixture.detectChanges();
+
+    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+    expect(overlayPane.getAttribute('dir')).toEqual('rtl');
+
+    rtlFixture.componentInstance.trigger.closePanel();
+    rtlFixture.detectChanges();
+
+    dirProvider.value = 'ltr';
+    rtlFixture.componentInstance.trigger.openPanel();
+    rtlFixture.detectChanges();
+
+    overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane')!;
+    expect(overlayPane.getAttribute('dir')).toEqual('ltr');
+  });
+
   describe('forms integration', () => {
     let fixture: ComponentFixture<SimpleAutocomplete>;
     let input: HTMLInputElement;