Disable keyboard control when an editable element is focused (#885)

assets/js/keyboard_control/index.js

@@ -1,5 +1,5 @@
 import { getAttributeOrThrow, parseBoolean } from "../lib/attribute";
-import { cancelEvent } from "../lib/utils";
+import { cancelEvent, isEditableElement } from "../lib/utils";
 
 /**
  * A hook for ControlComponent to handle user keyboard interactions.
@@ -30,6 +30,13 @@ const KeyboardControl = {
     };
 
     window.addEventListener("keyup", this.handleDocumentKeyUp, true);
+
+    this.handleDocumentFocus = (event) => {
+      handleDocumentFocus(this, event);
+    };
+
+    // Note: the focus event doesn't bubble, so we register for the capture phase
+    window.addEventListener("focus", this.handleDocumentFocus, true);
   },
 
   updated() {
@@ -39,6 +46,7 @@ const KeyboardControl = {
   destroyed() {
     window.removeEventListener("keydown", this.handleDocumentKeyDown, true);
     window.removeEventListener("keyup", this.handleDocumentKeyUp, true);
+    window.removeEventListener("focus", this.handleDocumentFocus, true);
   },
 };
 
@@ -84,6 +92,12 @@ function handleDocumentKeyUp(hook, event) {
   }
 }
 
+function handleDocumentFocus(hook, event) {
+  if (hook.props.isKeydownEnabled && isEditableElement(event.target)) {
+    hook.pushEventTo(hook.props.target, "disable_keyboard", {});
+  }
+}
+
 function keyboardEnabled(hook) {
   return hook.props.isKeydownEnabled || hook.props.isKeyupEnabled;
 }

lib/livebook_web/live/output/control_component.ex

@@ -61,9 +61,18 @@ defmodule LivebookWeb.Output.ControlComponent do
   @impl true
   def handle_event("toggle_keyboard", %{}, socket) do
     socket = update(socket, :keyboard_enabled, &not/1)
+    maybe_report_status(socket)
+    {:noreply, socket}
+  end
 
-    if :status in socket.assigns.attrs.events do
+  def handle_event("disable_keyboard", %{}, socket) do
-      report_event(socket, %{type: :status, enabled: socket.assigns.keyboard_enabled})
+    socket =
+      if socket.assigns.keyboard_enabled do
+        socket = assign(socket, keyboard_enabled: false)
+        maybe_report_status(socket)
+        socket
+      else
+        socket
       end
 
     {:noreply, socket}
@@ -84,6 +93,12 @@ defmodule LivebookWeb.Output.ControlComponent do
     {:noreply, socket}
   end
 
+  defp maybe_report_status(socket) do
+    if :status in socket.assigns.attrs.events do
+      report_event(socket, %{type: :status, enabled: socket.assigns.keyboard_enabled})
+    end
+  end
+
   defp report_event(socket, attrs) do
     topic = socket.assigns.attrs.ref
     event = Map.merge(%{origin: self()}, attrs)