Merge pull request #8266 from michaelchadwick/remove-choose-material-…

…type-render-modifiers

Remove ChooseMaterialTypeComponent render modifiers

packages/ilios-common/.lint-todo

@@ -1,5 +1,3 @@
-add|ember-template-lint|no-at-ember-render-modifiers|25|6|25|6|1ef231a97c0ec761eaafb3e76093515e5523ff27|1731542400000|1762646400000|1793750400000|addon/components/choose-material-type.hbs
-add|ember-template-lint|no-at-ember-render-modifiers|26|6|26|6|df94e6558ff62dea69f6f656f668f29b56bcc378|1731542400000|1762646400000|1793750400000|addon/components/choose-material-type.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|7|2|7|2|1a2522cd1202904fb09a6e811dec6b46d8189ab3|1731542400000|1762646400000|1793750400000|addon/components/daily-calendar-event.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|5|2|5|2|fb8a149d14413d4dfc84ffd31349ef3f2ac6d17b|1731542400000|1762646400000|1793750400000|addon/components/date-picker.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|6|2|6|2|993f1e23f796f19a221eae6e24872755e0436cb4|1731542400000|1762646400000|1793750400000|addon/components/date-picker.hbs

packages/ilios-common/addon/components/choose-material-type.hbs

@@ -2,7 +2,7 @@
   role="menubar"
   class="choose-material-type"
   data-test-choose-material-type
-  {{on-click-outside (set this "isOpen" false)}}
+  {{on-click-outside this.close}}
 >
   <button
     aria-label={{t "general.add"}}
@@ -12,32 +12,27 @@
     aria-haspopup="true"
     aria-expanded={{if this.isOpen "true" "false"}}
     data-test-toggle
-    {{on "click" (toggle "isOpen" this)}}
-    {{on "keyup" this.toggleMenu}}
+    {{on "keyup" this.keyUp}}
+    {{on "click" this.toggleMenu}}
   >
     {{t "general.add"}}
     <FaIcon @icon={{if this.isOpen "caret-down" "caret-right"}} />
   </button>
   {{#if this.isOpen}}
-    <div
-      class="menu"
-      role="menu"
-      {{did-insert (set this "menuElement")}}
-      {{did-insert this.focusOnFirstItem}}
-    >
+    <div class="menu" role="menu">
       {{#each @types as |type|}}
         <button
           role="menuitem"
           type="button"
           tabindex="-1"
           data-test-item
           {{on "click" (fn @choose type)}}
-          {{on "keyup" this.moveFocus}}
+          {{on "keyup" this.keyUp}}
           {{on "mouseenter" this.clearFocus}}
         >
           {{t (concat "general." type)}}
         </button>
       {{/each}}
     </div>
   {{/if}}
-</div>
+</div>

packages/ilios-common/addon/components/choose-material-type.js

@@ -1,58 +1,69 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { task, timeout } from 'ember-concurrency';
 
 export default class ChooseMaterialTypeComponent extends Component {
   @tracked isOpen = false;
 
-  focusOnFirstItem(menuElement) {
-    menuElement.querySelector('button:first-of-type').focus();
+  focusFirstLink = task(async (item) => {
+    await timeout(1);
+    item.querySelector('.menu button:first-of-type').focus();
+  });
+
+  handleArrowUp(item) {
+    if (item?.previousElementSibling) {
+      item.previousElementSibling.focus();
+    } else {
+      item?.parentElement.lastElementChild.focus();
+    }
+  }
+
+  async handleArrowDown(item) {
+    if (item.classList.value.includes('toggle')) {
+      this.isOpen = true;
+      await this.focusFirstLink.perform(item.parentElement);
+    } else {
+      if (item.nextElementSibling) {
+        item.nextElementSibling.focus(item.parentElement);
+      } else {
+        await this.focusFirstLink.perform(item.parentElement);
+      }
+    }
   }
 
   @action
-  moveFocus({ key, target }) {
+  async toggleMenu({ target }) {
+    this.isOpen = !this.isOpen;
+
+    if (this.isOpen) {
+      await this.focusFirstLink.perform(target.parentElement.parentElement);
+    }
+  }
+  @action
+  keyUp({ key, target }) {
     switch (key) {
       case 'ArrowDown':
-        if (target.nextElementSibling) {
-          target.nextElementSibling.focus();
-        } else {
-          this.menuElement.querySelector('button:nth-of-type(1)').focus();
-        }
+        this.handleArrowDown(target);
         break;
       case 'ArrowUp':
-        if (target.previousElementSibling) {
-          target.previousElementSibling.focus();
-        } else {
-          this.menuElement.querySelector('button:last-of-type').focus();
-        }
+        this.handleArrowUp(target);
         break;
       case 'Escape':
       case 'Tab':
       case 'ArrowRight':
       case 'ArrowLeft':
-        this.isOpen = false;
+        this.close();
         break;
     }
   }
   @action
-  clearFocus() {
-    if (this.menuElement) {
-      const buttons = this.menuElement.querySelectorAll('button');
-      buttons.forEach((el) => el.blur());
-    }
+  clearFocus({ target }) {
+    const menu = target.parentElement.parentElement;
+    menu.querySelectorAll('button').forEach((el) => el.blur());
   }
   @action
-  toggleMenu({ key }) {
-    switch (key) {
-      case 'ArrowDown':
-        this.isOpen = true;
-        break;
-      case 'Escape':
-      case 'Tab':
-      case 'ArrowRight':
-      case 'ArrowLeft':
-        this.isOpen = false;
-        break;
-    }
+  close() {
+    this.isOpen = false;
   }
 }