From a643ca9fe5982e738da7b7bd20150632407eaf67 Mon Sep 17 00:00:00 2001
From: Chris McCord <chris@chrismccord.com>
Date: Thu, 18 Nov 2021 16:01:29 -0500
Subject: [PATCH] Wrap focus

---
 assets/js/app.js | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index fbbd488..2cf758f 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -29,17 +29,19 @@ Hooks.Menu = {
   mounted(){
     this.menuItemsContainer = document.querySelector(`[aria-labelledby="${this.el.id}"]`)
     this.reset()
-    this.el.addEventListener("click", e => {
-      // disable if button clicked and click was not a keyboard event
-      if(e.currentTarget.isSameNode(this.el) && e.detail !== 0){
-        this.reset()
-        this.enabled = false
-      }
-    })
     this.handleKeyDown = (e) => this.onKeyDown(e)
-    this.menuItemsContainer.addEventListener("phx:show", () => {
-      if(this.enabled){ this.activate(0) }
+    this.el.addEventListener("click", e => {
+      if(!e.currentTarget.isSameNode(this.el)){ return }
+
       window.addEventListener("keydown", this.handleKeyDown)
+      // disable if button clicked and click was not a keyboard event
+      if(e.detail !== 0){
+        this.enabled = false
+      } else {
+        if(this.enabled){
+          window.requestAnimationFrame(() => this.activate(0))
+        }
+      }
     })
     this.menuItemsContainer.addEventListener("phx:hide", () => this.reset())
   },
@@ -64,12 +66,12 @@ Hooks.Menu = {
       e.preventDefault()
       let menuItems = this.menuItems()
       this.deactivate(menuItems)
-      this.activate(menuItems.indexOf(this.activeItem) + 1, menuItems.length - 1)
+      this.activate(menuItems.indexOf(this.activeItem) + 1, 0)
     } else if(e.key === "ArrowUp"){
       e.preventDefault()
       let menuItems = this.menuItems()
       this.deactivate(menuItems)
-      this.activate(menuItems.indexOf(this.activeItem) - 1, 0)
+      this.activate(menuItems.indexOf(this.activeItem) - 1, menuItems.length - 1)
     }
   }
 }