Browse Source

feat: focus query input on popup open

main
Inhji Y. 4 months ago
parent
commit
4e1cb80f4d
  1. 10
      assets/js/app.js
  2. 10
      lib/mirage_web/live/goto_anything_live.html.leex

10
assets/js/app.js

@ -20,10 +20,20 @@ import {LiveSocket} from "phoenix_live_view"
import TableSort from "tablesort"
const handledKeys = ["p"]
const Hooks = {}
Hooks.GotoAnything = {
updated() {
if (this.el.classList.contains("open")) {
const input = document.querySelector("#query")
input.focus()
}
}
}
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {
params: {_csrf_token: csrfToken},
hooks: Hooks,
metadata: {
keydown: (e, el) => {
if (handledKeys.includes(e.key))

10
lib/mirage_web/live/goto_anything_live.html.leex

@ -1,7 +1,11 @@
<div id="goto-anything" class="<%= @popup_class %>" phx-window-keydown="hotkey">
<div id="goto-anything" class="<%= @popup_class %>" phx-window-keydown="hotkey" phx-hook="GotoAnything">
<form action="#">
<input type="text" placeholder="Search for anything..." autofocus="true"
phx-keyup="search" phx-debounce="100">
<input id="query"
type="text"
placeholder="Search for anything..."
autocomplete="off"
phx-keyup="search"
phx-debounce="100">
</form>
<div class="results">

Loading…
Cancel
Save