Fixed issue with Command Palette focus retention.

Author: Abhijit Kar

assets/js/command_palette.js

@@ -11,56 +11,58 @@ const CommandPalette = {
  this.highlightSelection(this.search_results[this.selected]);
  };
 
- document.addEventListener("keydown", (e) => {
- if (e.key === "k" && e.metaKey) {
- e.preventDefault();
- liveSocket.execJS(this.el, this.el.getAttribute("data-show-modal"));
+ const handleKeyDown = (e) => {
+ switch (e.key) {
+ case "ArrowUp":
+  e.preventDefault();
 
- fetchDomNodes();
- } else {
- switch (e.key) {
- case "ArrowUp":
- e.preventDefault();
+ this.removeHighlight(this.search_results[this.selected]);
+ this.selected =
+ (this.selected - 1 + this.search_results.length) %
+ this.search_results.length;
 
- this.removeHighlight(this.search_results[this.selected]);
- this.selected =
- (this.selected - 1 + this.search_results.length) %
- this.search_results.length;
+ this.highlightSelection(this.search_results[this.selected]);
 
- this.highlightSelection(this.search_results[this.selected]);
+ break;
+ case "ArrowDown":
+ e.preventDefault();
 
- break;
- case "ArrowDown":
- e.preventDefault();
+ this.removeHighlight(this.search_results[this.selected]);
+ this.selected = (this.selected + 1) % this.search_results.length;
 
- this.removeHighlight(this.search_results[this.selected]);
- this.selected = (this.selected + 1) % this.search_results.length;
+ this.highlightSelection(this.search_results[this.selected]);
 
- this.highlightSelection(this.search_results[this.selected]);
+ break;
+ case "Enter":
+ e.preventDefault();
+ const target = this.search_results[this.selected];
+ clickableTarget = target.querySelector("a, button, [data-clickable]");
 
- break;
- case "Enter":
- e.preventDefault();
- const target = this.search_results[this.selected];
- clickableTarget = target.querySelector(
- "a, button, [data-clickable]"
- );
+ clickableTarget && clickableTarget.click();
+ break;
+ case "Tab":
+ e.preventDefault();
+ console.log("Do something on tab");
+ break;
+ default:
+ this.selected &&
+ this.removeHighlight(this.search_results[this.selected]);
+ }
+ };
+
+ document.addEventListener("keydown", (e) => {
+ if (e.key === "k" && e.metaKey) {
+ e.preventDefault();
+ liveSocket.execJS(this.el, this.el.getAttribute("data-show-modal"));
 
- clickableTarget && clickableTarget.click();
- break;
- case "Tab":
- e.preventDefault();
- console.log("Do something on tab");
- break;
- default:
- this.selected &&
- this.removeHighlight(this.search_results[this.selected]);
- }
+ !this.search_results && fetchDomNodes();
+ } else {
+ this.el.addEventListener("keydown", handleKeyDown);
  }
  });
+
  this.handleEvent("search-results-ready", fetchDomNodes);
  },
- destroyed() {},
  highlightSelection(target) {
  if (!target) return;
  target.setAttribute("aria-selected", true);

lib/derpy_tools_web/live/tools/metadata_analyzer_live.ex

@@ -140,7 +140,7 @@ defmodule DerpyToolsWeb.MetadataAnalyzerLive do
  """
  end
 
- def handle_event("validate", %{"metadata" => params}, socket) do
+ def handle_event("validate", %{"metadata_schema" => params}, socket) do
  changeset =
  %MetadataSchema{}
  |> MetadataSchema.change_metadata(params)
@@ -151,7 +151,7 @@ defmodule DerpyToolsWeb.MetadataAnalyzerLive do
  {:noreply, socket}
  end
 
- def handle_event("save", %{"metadata" => params}, socket) do
+ def handle_event("save", %{"metadata_schema" => params}, socket) do
  case MetadataSchema.update(params) do
  {:ok, %{id: _, url: url}} ->
  changeset = MetadataSchema.change_metadata(%MetadataSchema{}, params)