fix(linear-progress): Fix indeterminate animation bug (material-components#5180)

This fixes the bug where if the bar is in indeterminate state,
setting it to reverse will cause the animation timers to go out of
sync and make the bar look funny.

BREAKING CHANGE: MDCLinearProgressAdapter adapter has new `forceLayout` method

Author: allan-chen

packages/mdc-linear-progress/README.md

@@ -95,6 +95,7 @@ The adapter for linear progress must provide the following functions, with corre
 | `addClass(className: string) => void` | Adds a class to the root element. |
 | `removeClass(className: string) => void` | Removes a class from the root element. |
 | `hasClass(className: string) => boolean` | Returns boolean indicating whether the root element has a given class. |
+| `forceLayout() => void` | Force-trigger a layout on the root element. This is needed to restart animations correctly. |
 | `getPrimaryBar() => Element` | Returns the primary bar element. |
 | `getBuffer() => Element` | Returns the buffer element. |
 | `setStyle(el: Element, styleProperty: string, value: string) => void` | Sets the inline style on the given element. |

packages/mdc-linear-progress/adapter.ts

@@ -30,6 +30,7 @@
  */
 export interface MDCLinearProgressAdapter {
   addClass(className: string): void;
+  forceLayout(): void;
   getBuffer(): HTMLElement | null;
   getPrimaryBar(): HTMLElement | null;
   hasClass(className: string): boolean;

packages/mdc-linear-progress/component.ts

@@ -59,6 +59,7 @@ export class MDCLinearProgress extends MDCComponent<MDCLinearProgressFoundation>
     // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
     const adapter: MDCLinearProgressAdapter = {
       addClass: (className: string) => this.root_.classList.add(className),
+      forceLayout: () => (this.root_ as HTMLElement).offsetWidth,
       getBuffer: () => this.root_.querySelector(MDCLinearProgressFoundation.strings.BUFFER_SELECTOR),
       getPrimaryBar: () => this.root_.querySelector(MDCLinearProgressFoundation.strings.PRIMARY_BAR_SELECTOR),
       hasClass: (className: string) => this.root_.classList.contains(className),

packages/mdc-linear-progress/foundation.ts

@@ -38,6 +38,7 @@ export class MDCLinearProgressFoundation extends MDCFoundation<MDCLinearProgress
   static get defaultAdapter(): MDCLinearProgressAdapter {
     return {
       addClass: () => undefined,
+      forceLayout: () => undefined,
       getBuffer: () => null,
       getPrimaryBar: () => null,
       hasClass: () => false,
@@ -64,11 +65,23 @@ export class MDCLinearProgressFoundation extends MDCFoundation<MDCLinearProgress
 
   setDeterminate(isDeterminate: boolean) {
     this.isDeterminate_ = isDeterminate;
+
     if (this.isDeterminate_) {
       this.adapter_.removeClass(cssClasses.INDETERMINATE_CLASS);
       this.setScale_(this.adapter_.getPrimaryBar(), this.progress_);
       this.setScale_(this.adapter_.getBuffer(), this.buffer_);
     } else {
+      if (this.isReversed_) {
+        // Adding/removing REVERSED_CLASS starts a translate animation, while
+        // adding INDETERMINATE_CLASS starts a scale animation. Here, we reset
+        // the translate animation in order to keep it in sync with the new
+        // scale animation that will start from adding INDETERMINATE_CLASS
+        // below.
+        this.adapter_.removeClass(cssClasses.REVERSED_CLASS);
+        this.adapter_.forceLayout();
+        this.adapter_.addClass(cssClasses.REVERSED_CLASS);
+      }
+
       this.adapter_.addClass(cssClasses.INDETERMINATE_CLASS);
       this.setScale_(this.adapter_.getPrimaryBar(), 1);
       this.setScale_(this.adapter_.getBuffer(), 1);
@@ -91,6 +104,18 @@ export class MDCLinearProgressFoundation extends MDCFoundation<MDCLinearProgress
 
   setReverse(isReversed: boolean) {
     this.isReversed_ = isReversed;
+
+    if (!this.isDeterminate_) {
+      // Adding INDETERMINATE_CLASS starts a scale animation, while
+      // adding/removing REVERSED_CLASS starts a translate animation. Here, we
+      // reset the scale animation in order to keep it in sync with the new
+      // translate animation that will start from adding/removing REVERSED_CLASS
+      // below.
+      this.adapter_.removeClass(cssClasses.INDETERMINATE_CLASS);
+      this.adapter_.forceLayout();
+      this.adapter_.addClass(cssClasses.INDETERMINATE_CLASS);
+    }
+
     if (this.isReversed_) {
       this.adapter_.addClass(cssClasses.REVERSED_CLASS);
     } else {

test/unit/mdc-linear-progress/foundation.test.js

@@ -42,7 +42,7 @@ test('exports cssClasses', () => {
 
 test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCLinearProgressFoundation, [
-    'addClass', 'getPrimaryBar', 'getBuffer', 'hasClass', 'removeClass', 'setStyle',
+    'addClass', 'getPrimaryBar', 'forceLayout', 'getBuffer', 'hasClass', 'removeClass', 'setStyle',
   ]);
 });
 
@@ -70,6 +70,14 @@ test('#setDeterminate removes class', () => {
   td.verify(mockAdapter.removeClass(cssClasses.INDETERMINATE_CLASS));
 });
 
+test('#setDeterminate false calls forceLayout to correctly reset animation timers when reversed', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.hasClass(cssClasses.REVERSED_CLASS)).thenReturn(true);
+  foundation.init();
+  foundation.setDeterminate(false);
+  td.verify(mockAdapter.forceLayout());
+});
+
 test('#setDeterminate restores previous progress value after toggled from false to true', () => {
   const {foundation, mockAdapter} = setupTest();
   const primaryBar = {};
@@ -159,6 +167,22 @@ test('#setReverse removes class', () => {
   td.verify(mockAdapter.removeClass(cssClasses.REVERSED_CLASS));
 });
 
+test('#setReverse true calls forceLayout to correctly reset animation timers when indeterminate', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.hasClass(cssClasses.INDETERMINATE_CLASS)).thenReturn(true);
+  foundation.init();
+  foundation.setReverse(true);
+  td.verify(mockAdapter.forceLayout());
+});
+
+test('#setReverse false calls forceLayout to correctly reset animation timers when indeterminate', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.hasClass(cssClasses.INDETERMINATE_CLASS)).thenReturn(true);
+  foundation.init();
+  foundation.setReverse(false);
+  td.verify(mockAdapter.forceLayout());
+});
+
 test('#open removes class', () => {
   const {foundation, mockAdapter} = setupTest();
   td.when(mockAdapter.hasClass(cssClasses.REVERSED_CLASS)).thenReturn(true);