don't overuse requestAnimationFrame (#3657)

This ensures that JS.focus works on iOS.

Fixes: #3563

Author: SteffenDE

assets/js/phoenix_live_view/hooks.js

@@ -67,9 +67,12 @@ let Hooks = {
           ARIA.focusFirst(this.el)
         }
       })
-      this.el.addEventListener("phx:show-end", () => this.el.focus())
-      if(window.getComputedStyle(this.el).display !== "none"){
-        ARIA.focusFirst(this.el)
+      // only try to change the focus if it is not already inside
+      if(!this.el.contains(document.activeElement)){
+        this.el.addEventListener("phx:show-end", () => this.el.focus())
+        if(window.getComputedStyle(this.el).display !== "none"){
+          ARIA.focusFirst(this.el)
+        }
       }
     }
   }

assets/js/phoenix_live_view/js.js

@@ -97,11 +97,11 @@ let JS = {
   },
 
   exec_focus(e, eventType, phxEvent, view, sourceEl, el){
-    window.requestAnimationFrame(() => ARIA.attemptFocus(el))
+    ARIA.attemptFocus(el)
   },
 
   exec_focus_first(e, eventType, phxEvent, view, sourceEl, el){
-    window.requestAnimationFrame(() => ARIA.focusFirstInteractive(el) || ARIA.focusFirst(el))
+    ARIA.focusFirstInteractive(el) || ARIA.focusFirst(el)
   },
 
   exec_push_focus(e, eventType, phxEvent, view, sourceEl, el){
@@ -219,18 +219,14 @@ let JS = {
       }
     } else {
       if(this.isVisible(el)){
-        window.requestAnimationFrame(() => {
-          el.dispatchEvent(new Event("phx:hide-start"))
-          DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = "none")
-          el.dispatchEvent(new Event("phx:hide-end"))
-        })
+        el.dispatchEvent(new Event("phx:hide-start"))
+        DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = "none")
+        el.dispatchEvent(new Event("phx:hide-end"))
       } else {
-        window.requestAnimationFrame(() => {
-          el.dispatchEvent(new Event("phx:show-start"))
-          let stickyDisplay = display || this.defaultDisplay(el)
-          DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = stickyDisplay)
-          el.dispatchEvent(new Event("phx:show-end"))
-        })
+        el.dispatchEvent(new Event("phx:show-start"))
+        let stickyDisplay = display || this.defaultDisplay(el)
+        DOM.putSticky(el, "toggle", currentEl => currentEl.style.display = stickyDisplay)
+        el.dispatchEvent(new Event("phx:show-end"))
       }
     }
   },