fix(select): Close menu on anchor click when menu is open

PiperOrigin-RevId: 315309782
material-components · Jun 8, 2020 · 8fa22aa · 8fa22aa
1 parent 2b420c5
commit 8fa22aa
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git 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
@@ -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,15 +418,15 @@ 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);
     expect(mockAdapter.setRippleCenter).toHaveBeenCalledWith(0);
     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);