Better blur handling

ember-ui/app/components/meal-item.hbs

@@ -1,4 +1,8 @@
-<LinkTo @route="meal" @model={{@meal}} class="block bg-white border border-gray-400 focus:border-teal-500 focus:shadow-sm focus:bg-teal-100 outline-none" data-test-id="meal-link">
+<LinkTo
+  {{on 'blur' @handleBlur}}
+  @route="meal"
+  @model={{@meal}}
+  class="block bg-white border border-gray-400 focus:border-teal-500 focus:shadow-sm focus:bg-teal-100 outline-none" data-test-id="meal-link">
   <div class="max-w-sm w-full lg:max-w-full lg:flex">
     <div class="h-48 lg:h-auto lg:w-48 flex-none">
       <img src={{@meal.thumbnailUrl}} alt="" role="presentation" class="h-full w-full object-cover" data-test-id="meal-preview-image">

ember-ui/app/components/meal-list.hbs

@@ -1,5 +1,6 @@
 <SortableGroupAccessible
-  @models={{this.sortedItems}} as |groupHasFocus selectedIndex orderItemDown orderItemUp|>
+  @models={{this.sortedItems}}
+  as |groupHasFocus selectedIndex orderItemDown orderItemUp handleBlur|>
   <SortableGroup
     @onChange={{action this.reorderMeals}}
     as |group|>
@@ -9,12 +10,16 @@
         @currentIndex={{index}}
         @selectedIndex={{selectedIndex}}
         @orderItemDown={{orderItemDown}}
-        @orderItemUp={{orderItemUp}}>
+        @orderItemUp={{orderItemUp}}
+        @handleBlur={{handleBlur}}>
         <SortableItem
           @model={{meal}}
           @group={{group}}
           data-test-id="meal-item">
-          <MealItem @meal={{meal}} {{on "click" this.openMealDetails}} />
+          <MealItem
+            @meal={{meal}}
+            @handleBlur={{handleBlur}}
+          />
         </SortableItem>
       </SortableItemAccessible>
     {{/each}}

ember-ui/app/components/sortable-group-accessible.hbs

@@ -8,5 +8,5 @@
   {{key-down this.preventDefault key='ArrowDown'}}
   tabindex="0"
   class="shadow-md bg-gray-200 outline-none border border-gray-400 focus:border-teal-400 focus:shadow-lg">
-  {{yield this.groupHasFocus this.selectedIndex (action 'orderItemDown') (action 'orderItemUp')}}
+  {{yield this.groupHasFocus this.selectedIndex (action 'orderItemDown') (action 'orderItemUp') (action 'handleBlur')}}
 </div>

ember-ui/app/components/sortable-group-accessible.js

@@ -15,8 +15,8 @@ export default class SortableGroupAccessibleComponent extends Component {
   handleFocus() { this.groupHasFocus = true; }
 
   @action
-  handleBlur({ target, relatedTarget }) {
+  handleBlur({ relatedTarget }) {
-    if (!target.contains(relatedTarget)) this.groupHasFocus = false;
+    if (!this.listElement.contains(relatedTarget)) this.groupHasFocus = false;
   }
 
   @action

ember-ui/app/components/sortable-item-accessible.hbs

@@ -3,6 +3,7 @@
     {{#if active}}
       <button
         {{on 'click' (fn @orderItemUp @currentIndex)}}
+        {{on 'blur' @handleBlur}}
         data-action-up
         role="button"
         class="text-gray-800 outline-none absolute left-0 top-0 p-2 m-4 bg-white rounded-lg border-2 border-gray-800 focus:border-teal-400 shadow-sm">
@@ -10,6 +11,7 @@
       </button>
       <button
         {{on 'click' (fn @orderItemDown @currentIndex)}}
+        {{on 'blur' @handleBlur}}
         data-action-down
         role="button"
         class="transform rotate-180 text-gray-800 outline-none absolute left-0 bottom-0 p-2 m-4 bg-white rounded-lg border-2 border-gray-800 focus:border-teal-400 shadow-sm">