fix(select): Make compatible with rich list-items

PiperOrigin-RevId: 314600015

packages/mdc-list/README.md

@@ -505,6 +505,7 @@ Property | Value Type | Description
 Method Signature | Description
 --- | ---
 `layout() => void` | Recalculates layout and orientation.
+`getPrimaryText(item: Element) => string` | Fetches the primary text in the given element.
 `initializeListType() => void` | Initialize `selectedIndex` value based on pre-selected checkbox list items, single selection or radio.
 `setEnabled(itemIndex: number, isEnabled: boolean) => void` | Updates the list item at `itemIndex` to the desired `isEnabled` state.
 

packages/mdc-list/component.ts

@@ -111,6 +111,23 @@ export class MDCList extends MDCComponent<MDCListFoundation> {
     this.foundation.layout();
   }
 
+  /**
+   * Extracts the primary text from a list item.
+   * @param item The list item element.
+   * @return The primary text in the element.
+   */
+  getPrimaryText(item: Element): string {
+    const primaryText =
+        item.querySelector(`.${cssClasses.LIST_ITEM_PRIMARY_TEXT_CLASS}`);
+    if (primaryText) {
+      return primaryText.textContent || '';
+    }
+
+    const singleLineText =
+        item.querySelector(`.${cssClasses.LIST_ITEM_TEXT_CLASS}`);
+    return (singleLineText && singleLineText.textContent) || '';
+  }
+
   /**
    * Initialize selectedIndex value based on pre-selected checkbox list items, single selection or radio.
    */
@@ -171,17 +188,8 @@ export class MDCList extends MDCComponent<MDCListFoundation> {
       getFocusedElementIndex: () =>
           this.listElements.indexOf(document.activeElement!),
       getListItemCount: () => this.listElements.length,
-      getPrimaryTextAtIndex: (index) => {
-        const primaryText = this.listElements[index].querySelector(
-            `.${cssClasses.LIST_ITEM_PRIMARY_TEXT_CLASS}`);
-        if (primaryText) {
-          return primaryText.textContent || '';
-        }
-
-        const singleLineText = this.listElements[index].querySelector(
-            `.${cssClasses.LIST_ITEM_TEXT_CLASS}`);
-        return (singleLineText && singleLineText.textContent) || '';
-      },
+      getPrimaryTextAtIndex: (index) =>
+          this.getPrimaryText(this.listElements[index]),
       hasCheckboxAtIndex: (index) => {
         const listItem = this.listElements[index];
         return !!listItem.querySelector(strings.CHECKBOX_SELECTOR);

packages/mdc-list/test/component.test.ts

@@ -376,6 +376,22 @@ describe('MDCList', () => {
     expect(0).toEqual(root.querySelectorAll('button:not([tabindex])').length);
   });
 
+  it('#getPrimaryText returns the appropriate text for one line list', () => {
+    const {root, component} = setupTest();
+    const item = root.querySelectorAll('.mdc-list-item')[2] as HTMLElement;
+    document.body.appendChild(root);
+    expect(component.getPrimaryText(item)).toEqual('Pasta');
+    document.body.removeChild(root);
+  });
+
+  it('#getPrimaryText returns the appropriate text for two line list', () => {
+    const {root, component} = setupTest(getTwoLineFixture());
+    const item = root.querySelectorAll('.mdc-list-item')[2] as HTMLElement;
+    document.body.appendChild(root);
+    expect(component.getPrimaryText(item)).toEqual('Pasta');
+    document.body.removeChild(root);
+  });
+
   it('vertical calls setVerticalOrientation on foundation', () => {
     const {component, mockFoundation} = setupTest();
     component.vertical = false;

packages/mdc-menu/README.md

@@ -231,6 +231,7 @@ Method Signature | Description
 `setIsHoisted(isHoisted: boolean) => void` | Proxies to the menu surface's `setIsHoisted(isHoisted: boolean)` method.
 `setAnchorElement(element: Element) => void` | Proxies to the menu surface's `setAnchorElement(element)` method.
 `getOptionByIndex(index: number) => Element \| null` | Returns the list item at the `index` specified.
+`getPrimaryTextAtIndex(index: number) => string` | Returns the primary text at the `index` specified.
 `getDefaultFoundation() => MDCMenuFoundation` | Returns the foundation.
 `setDefaultFocusState(focusState: DefaultFocusState) => void` | Sets default focus state where the menu should focus every time when menu is opened. Focuses the list root (`DefaultFocusState.LIST_ROOT`) element by default.
 `setEnabled(index: number, isEnabled: boolean) => void` | Sets the enabled state to `isEnabled` for the menu item at given `index`.

packages/mdc-menu/component.ts

@@ -200,6 +200,18 @@ export class MDCMenu extends MDCComponent<MDCMenuFoundation> {
     }
   }
 
+  /**
+   * @param index A menu item's index.
+   * @return The primary text within the menu at the index specified.
+   */
+  getPrimaryTextAtIndex(index: number): string {
+    const item = this.getOptionByIndex(index);
+    if (item && this.list_) {
+      return this.list_.getPrimaryText(item) || '';
+    }
+    return '';
+  }
+
   setFixedPosition(isFixed: boolean) {
     this.menuSurface_.setFixedPosition(isFixed);
   }

packages/mdc-menu/test/component.test.ts

@@ -83,11 +83,12 @@ function getFixtureWithMultipleSelectionGroups(open = false) {
 }
 
 class FakeList {
-  destroy: Function = jasmine.createSpy('.destroy');
-  itemsContainer: Function = jasmine.createSpy('.root_');
-  layout: Function = jasmine.createSpy('layout');
+  destroy: jasmine.Spy = jasmine.createSpy('.destroy');
+  itemsContainer: jasmine.Spy = jasmine.createSpy('.root_');
+  layout: jasmine.Spy = jasmine.createSpy('layout');
   wrapFocus: boolean = true;
   listElements: HTMLElement[];
+  getPrimaryText: jasmine.Spy = jasmine.createSpy('.getPrimaryText');
 
   constructor(root: HTMLElement) {
     this.listElements = [].slice.call(root.querySelectorAll('.mdc-list-item'))
@@ -294,6 +295,14 @@ describe('MDCMenu', () => {
     expect(component.getOptionByIndex(items.length)).toBe(null);
   });
 
+  it('getPrimaryTextAtIndex', () => {
+    const {component, list} = setupTestWithFakes();
+    list.getPrimaryText.withArgs(jasmine.any(Element))
+        .and.returnValue('Another Item');
+
+    expect(component.getPrimaryTextAtIndex(1)).toEqual('Another Item');
+  });
+
   it('setFixedPosition', () => {
     const {component, menuSurface} = setupTestWithFakes();
     component.setFixedPosition(true);

packages/mdc-select/component.ts

@@ -393,7 +393,7 @@ export class MDCSelect extends MDCComponent<MDCSelectFoundation> {
       getMenuItemValues: () => this.menu.items.map(
           (el) => el.getAttribute(strings.VALUE_ATTR) || ''),
       getMenuItemTextAtIndex: (index: number) =>
-          this.menu.items[index].textContent as string,
+          this.menu.getPrimaryTextAtIndex(index),
       addClassAtIndex: (index: number, className: string) => {
         this.menu.items[index].classList.add(className);
       },