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

PiperOrigin-RevId: 315309782

Author: allan-chen

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 =

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);