fix(select): debounce click on anchor

PiperOrigin-RevId: 341104682

Author: allan-chen

packages/mdc-select/constants.ts

@@ -52,6 +52,7 @@ const strings = {
 const numbers = {
   LABEL_SCALE: 0.75,
   UNSET_INDEX: -1,
+  CLICK_DEBOUNCE_TIMEOUT_MS: 330,
 };
 
 export {cssClasses, strings, numbers};

packages/mdc-select/foundation.ts

@@ -104,6 +104,9 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
   private customValidity = true;
   private lastSelectedIndex = numbers.UNSET_INDEX;
 
+  private clickDebounceTimeout = 0;
+  private recentlyClicked = false;
+
   /* istanbul ignore next: optional argument is not a branch statement */
   /**
    * @param adapter
@@ -289,10 +292,12 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
   }
 
   handleClick(normalizedX: number) {
-    if (this.disabled) {
+    if (this.disabled || this.recentlyClicked) {
       return;
     }
 
+    this.setClickDebounceTimeout();
+
     if (this.isMenuOpen) {
       this.adapter.closeMenu();
       return;
@@ -476,6 +481,14 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
       this.adapter.removeSelectAnchorAttr(strings.ARIA_DESCRIBEDBY);
     }
   }
+
+  private setClickDebounceTimeout() {
+    clearTimeout(this.clickDebounceTimeout);
+    this.clickDebounceTimeout = setTimeout(() => {
+      this.recentlyClicked = false;
+    }, numbers.CLICK_DEBOUNCE_TIMEOUT_MS);
+    this.recentlyClicked = true;
+  }
 }
 
 // tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.

packages/mdc-select/test/foundation.test.ts

@@ -22,12 +22,15 @@
  */
 
 import {checkNumTimesSpyCalledWithArgs, createMockAdapter, verifyDefaultAdapter} from '../../../testing/helpers/foundation';
+import {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';
 import {cssClasses, numbers, strings} from '../constants';
 import {MDCSelectFoundation} from '../foundation';
 
 const LABEL_WIDTH = 100;
 
 describe('MDCSelectFoundation', () => {
+  setUpMdcTestEnvironment();
+
   it('exports cssClasses', () => {
     expect(MDCSelectFoundation.cssClasses).toEqual(cssClasses);
   });
@@ -406,6 +409,19 @@ describe('MDCSelectFoundation', () => {
     expect(mockAdapter.addClass).not.toHaveBeenCalled();
   });
 
+  it('#handleClick debounces clicks', () => {
+    const {foundation, mockAdapter} = setupTest();
+    foundation.handleClick(0);
+    foundation['isMenuOpen'] = false;
+    foundation.handleClick(0);
+    expect(mockAdapter.openMenu).toHaveBeenCalledTimes(1);
+
+    foundation['isMenuOpen'] = false;
+    jasmine.clock().tick(numbers.CLICK_DEBOUNCE_TIMEOUT_MS);
+    foundation.handleClick(0);
+    expect(mockAdapter.openMenu).toHaveBeenCalledTimes(2);
+  });
+
   it('#handleClick sets the ripple center if isMenuOpen=false', () => {
     const {foundation, mockAdapter} = setupTest();
     (foundation as any).isMenuOpen = false;