WIP: Change MDCList.listElements from HTMLElement[] back to `Elem…

…ent[]`
material-components · Feb 11, 2019 · 91f5975 · 91f5975
1 parent 7a7d960
commit 91f5975
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/packages/mdc-list/index.ts b/packages/mdc-list/index.ts
@@ -33,8 +33,8 @@ class MDCList extends MDCComponent<MDCListFoundation> {
     this.foundation_.setVerticalOrientation(value);
   }
 
-  get listElements(): HTMLElement[] {
-    return [].slice.call(this.root_.querySelectorAll<HTMLElement>(strings.ENABLED_ITEMS_SELECTOR));
+  get listElements(): Element[] {
+    return [].slice.call(this.root_.querySelectorAll(strings.ENABLED_ITEMS_SELECTOR));
   }
 
   set wrapFocus(value: boolean) {
@@ -104,16 +104,16 @@ class MDCList extends MDCComponent<MDCListFoundation> {
    */
   initializeListType() {
     const checkboxListItems = this.root_.querySelectorAll(strings.ARIA_ROLE_CHECKBOX_SELECTOR);
-    const singleSelectedListItem = this.root_.querySelector<HTMLElement>(`
+    const singleSelectedListItem = this.root_.querySelector(`
       .${cssClasses.LIST_ITEM_ACTIVATED_CLASS},
       .${cssClasses.LIST_ITEM_SELECTED_CLASS}
     `);
-    const radioSelectedListItem = this.root_.querySelector<HTMLElement>(strings.ARIA_CHECKED_RADIO_SELECTOR);
+    const radioSelectedListItem = this.root_.querySelector(strings.ARIA_CHECKED_RADIO_SELECTOR);
 
     if (checkboxListItems.length) {
       const preselectedItems = this.root_.querySelectorAll(strings.ARIA_CHECKED_CHECKBOX_SELECTOR);
       this.selectedIndex =
-        [].map.call(preselectedItems, (listItem: HTMLElement) => this.listElements.indexOf(listItem)) as number[];
+        [].map.call(preselectedItems, (listItem: Element) => this.listElements.indexOf(listItem)) as number[];
     } else if (singleSelectedListItem) {
       if (singleSelectedListItem.classList.contains(cssClasses.LIST_ITEM_ACTIVATED_CLASS)) {
         this.foundation_.setUseActivatedClass(true);
@@ -135,12 +135,12 @@ class MDCList extends MDCComponent<MDCListFoundation> {
         }
       },
       focusItemAtIndex: (index) => {
-        const element = this.listElements[index] as HTMLElement;
+        const element = this.listElements[index] as HTMLElement | null;
         if (element) {
           element.focus();
         }
       },
-      getFocusedElementIndex: () => this.listElements.indexOf(document.activeElement as HTMLElement),
+      getFocusedElementIndex: () => this.listElements.indexOf(document.activeElement!),
       getListItemCount: () => this.listElements.length,
       hasCheckboxAtIndex: (index) => {
         const listItem = this.listElements[index];
@@ -203,8 +203,7 @@ class MDCList extends MDCComponent<MDCListFoundation> {
    */
   private getListItemIndex_(evt: Event) {
     const eventTarget = evt.target as Element;
-    const nearestParent =
-        ponyfill.closest<HTMLElement>(eventTarget, `.${cssClasses.LIST_ITEM_CLASS}, .${cssClasses.ROOT}`);
+    const nearestParent = ponyfill.closest(eventTarget, `.${cssClasses.LIST_ITEM_CLASS}, .${cssClasses.ROOT}`);
 
     // Get the index of the element if it is a list item.
     if (nearestParent && ponyfill.matches(nearestParent, `.${cssClasses.LIST_ITEM_CLASS}`)) {

diff --git a/packages/mdc-menu/index.ts b/packages/mdc-menu/index.ts
@@ -108,7 +108,7 @@ class MDCMenu extends MDCComponent<MDCMenuFoundation> {
    * the items container that are proper list items, and not supplemental / presentational DOM
    * elements.
    */
-  get items(): HTMLElement[] {
+  get items(): Element[] {
     return this.list_ ? this.list_.listElements : [];
   }
 
@@ -191,10 +191,10 @@ class MDCMenu extends MDCComponent<MDCMenuFoundation> {
       },
       elementContainsClass: (element, className) => element.classList.contains(className),
       closeSurface: () => this.open = false,
-      getElementIndex: (element) => this.items.indexOf(element as HTMLElement),
+      getElementIndex: (element) => this.items.indexOf(element),
       getParentElement: (element) => element.parentElement,
       getSelectedElementIndex: (selectionGroup) => {
-        const selectedListItem = selectionGroup.querySelector<HTMLElement>(`.${cssClasses.MENU_SELECTED_LIST_ITEM}`);
+        const selectedListItem = selectionGroup.querySelector(`.${cssClasses.MENU_SELECTED_LIST_ITEM}`);
         return selectedListItem ? this.items.indexOf(selectedListItem) : -1;
       },
       notifySelected: (evtData) => this.emit<DefaultMenuItemEventDetail>(strings.SELECTED_EVENT, {

diff --git a/packages/mdc-select/index.ts b/packages/mdc-select/index.ts
@@ -89,7 +89,7 @@ class MDCSelect extends MDCComponent<MDCSelectFoundation> implements RippleCapab
   get selectedIndex(): number {
     let selectedIndex = -1;
     if (this.menuElement_ && this.menu_) {
-      const selectedEl = this.menuElement_.querySelector<HTMLElement>(strings.SELECTED_ITEM_SELECTOR)!;
+      const selectedEl = this.menuElement_.querySelector(strings.SELECTED_ITEM_SELECTOR)!;
       selectedIndex = this.menu_.items.indexOf(selectedEl);
     } else if (this.nativeControl_) {
       selectedIndex = this.nativeControl_.selectedIndex;
@@ -245,7 +245,8 @@ class MDCSelect extends MDCComponent<MDCSelectFoundation> implements RippleCapab
     this.handleMenuOpened_ = () => {
       // Menu should open to the last selected element.
       if (this.selectedIndex >= 0) {
-        this.menu_!.items[this.selectedIndex].focus();
+        const selectedItemEl = this.menu_!.items[this.selectedIndex] as HTMLElement;
+        selectedItemEl.focus();
       }
     };
     this.handleMenuClosed_ = () => {
@@ -413,8 +414,7 @@ class MDCSelect extends MDCComponent<MDCSelectFoundation> implements RippleCapab
         return '';
       },
       setValue: (value: string) => {
-        const element =
-          this.menuElement_!.querySelector<HTMLElement>(`[${strings.ENHANCED_VALUE_ATTR}="${value}"]`);
+        const element = this.menuElement_!.querySelector(`[${strings.ENHANCED_VALUE_ATTR}="${value}"]`);
         this.setEnhancedSelectedIndex_(element ? this.menu_!.items.indexOf(element) : -1);
       },
       openMenu: () => {