From 450d8b40369a912f7c32c79f0e3f45a057488d55 Mon Sep 17 00:00:00 2001
From: Ava Wroten <jo@wroten.me>
Date: Thu, 5 Mar 2020 10:13:57 -0600
Subject: [PATCH] Better blur handling

---
 ember-ui/app/components/meal-item.hbs                 |  6 +++++-
 ember-ui/app/components/meal-list.hbs                 | 11 ++++++++---
 ember-ui/app/components/sortable-group-accessible.hbs |  2 +-
 ember-ui/app/components/sortable-group-accessible.js  |  4 ++--
 ember-ui/app/components/sortable-item-accessible.hbs  |  2 ++
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/ember-ui/app/components/meal-item.hbs b/ember-ui/app/components/meal-item.hbs
index 19b76dc..a91982e 100644
--- a/ember-ui/app/components/meal-item.hbs
+++ b/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">
diff --git a/ember-ui/app/components/meal-list.hbs b/ember-ui/app/components/meal-list.hbs
index 9bf67e6..5a09016 100644
--- a/ember-ui/app/components/meal-list.hbs
+++ b/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}}
diff --git a/ember-ui/app/components/sortable-group-accessible.hbs b/ember-ui/app/components/sortable-group-accessible.hbs
index 560ad20..be39ac4 100644
--- a/ember-ui/app/components/sortable-group-accessible.hbs
+++ b/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>
diff --git a/ember-ui/app/components/sortable-group-accessible.js b/ember-ui/app/components/sortable-group-accessible.js
index e82d09e..654d546 100644
--- a/ember-ui/app/components/sortable-group-accessible.js
+++ b/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 }) {
-    if (!target.contains(relatedTarget)) this.groupHasFocus = false;
+  handleBlur({ relatedTarget }) {
+    if (!this.listElement.contains(relatedTarget)) this.groupHasFocus = false;
   }
 
   @action
diff --git a/ember-ui/app/components/sortable-item-accessible.hbs b/ember-ui/app/components/sortable-item-accessible.hbs
index 12c458f..0bf049b 100644
--- a/ember-ui/app/components/sortable-item-accessible.hbs
+++ b/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">