fix(form-field): FormField with outline doesn't work well with dir="r… (#15415)

Suresh918 · andrewseguin · commit 815875477d0e · 2019-09-30T12:32:13.000-07:00
* fix(form-field): FormField with outline doesn't work well with dir="rtl" #14944 * Revert "fix(form-field): FormField with outline doesn't work well with dir="rtl" #14944" This reverts commit 501b6be * fix(form-field): FormField with outline doesn't work well with dir="rtl" #14944 * chore(ivy): add static flag to tab-related static queries * chore(ivy): add static flag to dialog-related static queries (#15239) * chore(ivy): add static flag to more queries (#15252) This should fix the tests for AriaDescriber, AutofillMonitor, Portal, BottomSheet, Autocomplete, and Drawer. * chore(ivy): add static flag to tree-related static queries (#15255) * chore(ivy): add static flag to table-related static queries (#15257) * chore(ivy): fix static query stragglers that were not marked static query (#15267) * test(menu): refactor test that depends on static queries (#15289) Reworks a test that depends on static queries and fails under Ivy. * test(sidenav): fix sidenav failures under Ivy (#15300) * Fixes one unit test that was depending on static queries. * Fixes the remaining 16 failures that were due to some code that was commented out while waiting for a task which was resolved. * test(overlay): use static queries w/ overlay containers (#15301) * test(select): update static query tests (#15320) Fixes some tests that will fail under Ivy, because they depend on static queries. * test(accordion): update static query test (#15357) * fix: mark virtual scroll viewport queries as static (#15346) * fix(form-field): FormField with outline doesn't work well with dir="rtl" #14944 * refactor(button): use [attr.disabled] host binding in MatButton (#15308) * fix(list): override native button text align in action list (#15404) This happens to work when the content is just text; however, content gets center aligned when there are matLine elements nested in a <button mat-list-item>. * fix(badge): duplicate leftover badge after server-side render (#15417) Fixes badges being left over if the current page was rendered via Angular Universal. This can cause issues, because the ids on the badges can clash. * chore: bump version to 7.3.4 w/ changelog (#15439) * fix(schematics): do not run migrations multiple times (#15424) Currently when someone runs the update schematic within a CLI project, the migration could be executed multiple times for the same `tsconfig` path This can happen because the `getProjectTsConfigPaths` function _can_ incorrectly return the same tsconfig multiple times. The paths are not properly deduped as we don't normalize the determined project tsconfig paths. e.g. `/tsconfig.json` exists and the common tsconfig path is detected. At the same time the workspace configuration specifies `tsconfig.json` in the project options. Both paths refer to the same tsconfig project, but are different strings and therefore aren't filtered out by the `Set` which contains all possible tsconfig locations --> migrations are executed for both paths. * docs(drag-drop): add docs and live example for disabled sorting (#15426) Documents the functionality from #15064 and adds a live example. * test(chip-list): rework tests to work under Ivy (#15428) Equivalent of #15427 for master. Fixes the chip list tests that are failing under Ivy due to a known breaking change. * build: throw error if example is missing a title (#15430) Throws a proper error message if one of the examples is missing a title, in order to avoid a more cryptic error down the line. * refactor(selection-list): avoid deprecated method (#15393) * use `FocusKeyManager`'s `updateActiveItem` method instead of deprecated `updateActiveItemIndex` * fix description of `MatSelectionList`'s `focus` method * remove `MatSelectionList`'s redundant `(focus)` event listener * test(table): update static query test (#15452) * refactor(stepper): rework buttons to handle Ivy (#15429) In Ivy inheriting `host` bindings works correctly by merging the two declarations, whereas in ViewEngine the bindings aren't inherited at all. This means that with our current setup the `click` listener on the buttons will be invoked twice with Ivy. These changes rework the buttons so that they work both with Ivy and ViewEngine. * fix(table): use default change detection strategy on table (#15440) This resolves an issue with Ivy where change detection was not reflecting binding changes made to the row and cell templates in the component declaring the table. In View Engine, change detection for a dynamically created view runs in two cases: 1) When the view in which it was inserted is checked 2) When the view in which it was declared is checked As a result, if a dynamic view is inserted into an OnPush component, that view is not actually checked only "on push". It is also checked as often as its declaration view is checked (even if the insertion view is explicitly detached from change detection). For this reason, marking `MatTable` as "OnPush" doesn't have much of an effect. It is built almost entirely of views that are declared elsewhere, so its change detection frequency is dependent on those declaration views. It also doesn't have any bindings inside its own view that would be protected by "OnPush", so marking it this way is effectively a noop and can be removed without performance regressions. In Ivy, this change detection loophole has been closed, so declaration views can no longer de-optimize OnPush components. This means bindings inherited from declaration views aren't updated by default if `MatTable` is OnPush (the embedded view would need to be marked dirty explicitly). To avoid breaking changes when we transition to Ivy, it makes more sense to perpetuate the current behavior by removing the "OnPush" marker. As delineated earlier, this has no impact on View Engine. For Ivy, it would ensure bindings inherited from the declaration view are still checked by default. * test(input): make the type validation test to pass in Ivy (#15460) * fix(stepper): avoid breaking change in stepControl type (#15464) In #15134 we reworked the stepper not to depend on `@angular/forms` under the assumption that our limited `FormControl` interface would be enough to avoid a breaking change. Some people ended up being broken by the change so this PR reworks the `stepControl` type to avoid the breaking change. Fixes #15462. * fix(tooltip): render style values in ngOnInit instead of the constructor (#15469) Due to changes in Angular it's not logical to change style values directly within a constructor. This should be done instead within the ngOnInit lifecycle hook. This patch changes this behavior for the `ToolTip` component. * chore: update tooltip golden file (#15479) Fixes the API golden check failing against master. * refactor(datepicker): adapt custom header demo for Ivy (#15458) * refactor(focus-monitor): adapt demo examples for Ivy (#15475) * fix(table): use static queries for examples (#15483) * fix(stepper): content not being rendered out initially with ivy (#15485) Fixes the stepper's content not being shown on the first render with Ivy, because we assume that the template with be present on init. * Revert "fix(form-field): FormField with outline doesn't work well with dir="rtl" #14944" This reverts commit 501b6be * fix(form-field): FormField with outline doesn't work well with dir="rtl" #14944 * fix(form-field): test cases added for form field outline styles w.r.t direction changes * fix(form-field): lint errors and test cases fixes * fix(form-field): lint errors and test cases fixes * fix(form-field): test cases changes and comments added * fix(form-field): lint error fix (cherry picked from commit 914d40e)
diff --git a/src/material/form-field/form-field.ts b/src/material/form-field/form-field.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directionality} from '@angular/cdk/bidi';
+import {Direction, Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {
   AfterContentChecked,
@@ -232,6 +232,15 @@ export class MatFormField extends _MatFormFieldMixinBase
   /** Whether the Angular animations are enabled. */
   _animationsEnabled: boolean;
 
+  /* Holds the previous direction emitted by directionality service change emitter.
+     This is used in updateOutlineGap() method to update the width and position of the gap in the
+     outline. Only relevant for the outline appearance. The direction is getting updated in the
+     UI after directionality service change emission. So the outlines gaps are getting
+     updated in updateOutlineGap() method before connectionContainer child direction change
+     in UI. We may get wrong calculations. So we are storing the previous direction to get the
+     correct outline calculations*/
+  private _previousDirection: Direction = 'ltr';
+
   /**
    * @deprecated
    * @breaking-change 8.0.0
@@ -346,7 +355,10 @@ export class MatFormField extends _MatFormFieldMixinBase
     });
 
     if (this._dir) {
-      this._dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => this.updateOutlineGap());
+      this._dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => {
+        this.updateOutlineGap();
+        this._previousDirection = this._dir.value;
+      });
     }
   }
 
@@ -568,6 +580,6 @@ export class MatFormField extends _MatFormFieldMixinBase
 
   /** Gets the start end of the rect considering the current directionality. */
   private _getStartEnd(rect: ClientRect): number {
-    return this._dir && this._dir.value === 'rtl' ? rect.right : rect.left;
+    return this._previousDirection === 'rtl' ? rect.right : rect.left;
   }
 }
diff --git a/src/material/input/input.spec.ts b/src/material/input/input.spec.ts
@@ -1448,6 +1448,61 @@ describe('MatInput with appearance', () => {
     expect(outlineFixture.componentInstance.formField.updateOutlineGap).toHaveBeenCalled();
   }));
 
+  it('should update the outline gap correctly if the direction changes multiple times',
+    fakeAsync(() => {
+      fixture.destroy();
+      TestBed.resetTestingModule();
+
+      let zone: MockNgZone;
+      const fakeDirectionality = {change: new Subject<Direction>(), value: 'ltr'};
+      const outlineFixture = createComponent(MatInputWithAppearanceAndLabel, [
+        {
+          provide: Directionality,
+          useValue: fakeDirectionality
+        },
+        {
+          provide: NgZone,
+          useFactory: () => zone = new MockNgZone()
+        }
+      ]);
+
+      outlineFixture.componentInstance.appearance = 'outline';
+      outlineFixture.detectChanges();
+      zone!.simulateZoneExit();
+      flush();
+      outlineFixture.detectChanges();
+
+      spyOn(outlineFixture.componentInstance.formField, 'updateOutlineGap');
+
+      fakeDirectionality.value = 'rtl';
+      fakeDirectionality.change.next('rtl');
+      outlineFixture.detectChanges();
+      flush();
+      outlineFixture.detectChanges();
+
+      let wrapperElement = outlineFixture.nativeElement;
+      let outlineStart = wrapperElement.querySelector('.mat-form-field-outline-start');
+      // outlineGapPadding 5px + containerRect margin/padding in worst case 3px
+      const maxOutlineStart = '8px';
+
+      expect(outlineFixture.componentInstance.formField.updateOutlineGap).toHaveBeenCalled();
+      expect(parseInt(outlineStart.style.width)).toBeLessThan(parseInt(maxOutlineStart));
+
+      fakeDirectionality.value = 'ltr';
+      fakeDirectionality.change.next('ltr');
+      outlineFixture.detectChanges();
+      flush();
+      outlineFixture.detectChanges();
+
+      wrapperElement = outlineFixture.nativeElement;
+      outlineStart = wrapperElement.querySelector('.mat-form-field-outline-start');
+
+      expect(outlineFixture.componentInstance.formField.updateOutlineGap).toHaveBeenCalled();
+      expect(parseInt(outlineStart.style.width)).toBeLessThan(parseInt(maxOutlineStart));
+
+    }));
+
+
 
 
 });
