From 8fa22aaccafa3b1ae09164b228d8e1b203337221 Mon Sep 17 00:00:00 2001
From: Allan Chen <allanchen@google.com>
Date: Mon, 8 Jun 2020 10:58:48 -0700
Subject: [PATCH] fix(select): Close menu on anchor click when menu is open

PiperOrigin-RevId: 315309782
---
 packages/mdc-select/foundation.ts           | 10 ++++++++--
 packages/mdc-select/test/foundation.test.ts | 14 +++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/mdc-select/foundation.ts b/packages/mdc-select/foundation.ts
index c6acaa96abd..4363708bea9 100644
--- a/packages/mdc-select/foundation.ts
+++ b/packages/mdc-select/foundation.ts
@@ -289,9 +289,15 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
   }
 
   handleClick(normalizedX: number) {
-    if (this.disabled || this.isMenuOpen) {
+    if (this.disabled) {
       return;
     }
+
+    if (this.isMenuOpen) {
+      this.adapter.closeMenu();
+      return;
+    }
+
     this.adapter.setRippleCenter(normalizedX);
 
     this.openMenu();
@@ -312,7 +318,7 @@ export class MDCSelectFoundation extends MDCFoundation<MDCSelectAdapter> {
     const arrowDown = normalizeKey(event) === KEY.ARROW_DOWN;
 
     // Typeahead
-    if (event.key && event.key.length === 1 ||
+    if (!isSpace && event.key && event.key.length === 1 ||
         isSpace && this.adapter.isTypeaheadInProgress()) {
       const key = isSpace ? ' ' : event.key;
       const typeaheadNextIndex =
diff --git a/packages/mdc-select/test/foundation.test.ts b/packages/mdc-select/test/foundation.test.ts
index 532c1e0b6fd..6d83dcc4715 100644
--- a/packages/mdc-select/test/foundation.test.ts
+++ b/packages/mdc-select/test/foundation.test.ts
@@ -339,7 +339,7 @@ describe('MDCSelectFoundation', () => {
     expect(mockAdapter.activateBottomLine).toHaveBeenCalledTimes(1);
   });
 
-  it('#handleFocus calls adapter.activateBottomLine() if isMenuOpen_=true',
+  it('#handleFocus calls adapter.activateBottomLine() if isMenuOpen=true',
      () => {
        const {foundation, mockAdapter} = setupTest();
        (foundation as any).isMenuOpen = true;
@@ -360,7 +360,7 @@ describe('MDCSelectFoundation', () => {
     expect(mockAdapter.deactivateBottomLine).toHaveBeenCalledTimes(1);
   });
 
-  it('#handleBlur does not call deactivateBottomLine if isMenuOpen_=true',
+  it('#handleBlur does not call deactivateBottomLine if isMenuOpen=true',
      () => {
        const {foundation, mockAdapter} = setupTest();
        (foundation as any).isMenuOpen = true;
@@ -403,11 +403,11 @@ describe('MDCSelectFoundation', () => {
     expect(mockAdapter.addClass).toHaveBeenCalledWith(cssClasses.ACTIVATED);
   });
 
-  it('#handleClick does nothing if isMenuOpen_=true', () => {
+  it('#handleClick closes menu if isMenuOpen=true', () => {
     const {foundation, mockAdapter} = setupTest();
     (foundation as any).isMenuOpen = true;
     foundation.handleClick(0);
-    expect(mockAdapter.setRippleCenter).not.toHaveBeenCalledWith(0);
+    expect(mockAdapter.closeMenu).toHaveBeenCalled();
   });
 
   it('#handleClick does nothing if disabled', () => {
@@ -418,7 +418,7 @@ describe('MDCSelectFoundation', () => {
     expect(mockAdapter.addClass).not.toHaveBeenCalled();
   });
 
-  it('#handleClick sets the ripple center if isMenuOpen_=false', () => {
+  it('#handleClick sets the ripple center if isMenuOpen=false', () => {
     const {foundation, mockAdapter} = setupTest();
     (foundation as any).isMenuOpen = false;
     foundation.handleClick(0);
@@ -426,7 +426,7 @@ describe('MDCSelectFoundation', () => {
     expect(mockAdapter.setRippleCenter).toHaveBeenCalledTimes(1);
   });
 
-  it('#handleClick opens the menu if the select is focused and isMenuOpen_=false',
+  it('#handleClick opens the menu if the select is focused and isMenuOpen=false',
      () => {
        const {foundation, mockAdapter} = setupTest();
        mockAdapter.hasClass.withArgs(cssClasses.FOCUSED).and.returnValue(true);
@@ -442,7 +442,7 @@ describe('MDCSelectFoundation', () => {
         .toHaveBeenCalledWith('aria-expanded', 'true');
   });
 
-  it('#handleClick adds activated class if isMenuOpen_=false', () => {
+  it('#handleClick adds activated class if isMenuOpen=false', () => {
     const {foundation, mockAdapter} = setupTest();
     (foundation as any).isMenuOpen = false;
     foundation.handleClick(0);