Remove universal search hooks
- Global shortcuts don't work - Focus input on open can be achieved just with 'autofocus' attribute - Maintaining focus when input is active can be achieved just by adding an ID to the input
This commit is contained in:
@@ -23,14 +23,11 @@ import { LiveSocket } from "phoenix_live_view";
|
||||
import topbar from "../vendor/topbar";
|
||||
import { Hooks as FluxonHooks, DOM as FluxonDOM } from "fluxon";
|
||||
import BarcodeScannerHook from "./barcode-scanner";
|
||||
import { SearchHook, SearchInputHook } from "./search";
|
||||
import confetti from "canvas-confetti";
|
||||
import { createLiveToastHook } from "live_toast";
|
||||
|
||||
let Hooks = FluxonHooks;
|
||||
Hooks.BarcodeScanner = BarcodeScannerHook;
|
||||
Hooks.Search = SearchHook;
|
||||
Hooks.SearchInput = SearchInputHook;
|
||||
Hooks.LiveToast = createLiveToastHook();
|
||||
|
||||
let csrfToken = document
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
// Search hook for universal search functionality
|
||||
const SearchHook = {
|
||||
mounted() {
|
||||
this.setupGlobalKeyboardShortcuts();
|
||||
this.setupSearchInputFocus();
|
||||
},
|
||||
|
||||
updated() {
|
||||
this.setupSearchInputFocus();
|
||||
},
|
||||
|
||||
setupGlobalKeyboardShortcuts() {
|
||||
// Add global keyboard event listener for Ctrl/Cmd + K
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Check for Ctrl+K (Windows/Linux) or Cmd+K (Mac)
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
// Send event to the universal search LiveView
|
||||
const searchContainer = document.getElementById('universal-search');
|
||||
if (searchContainer) {
|
||||
searchContainer.dispatchEvent(new CustomEvent('phx:open_modal', {
|
||||
bubbles: true,
|
||||
detail: {}
|
||||
}));
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setupSearchInputFocus() {
|
||||
// Auto-focus search input when modal opens
|
||||
const searchInput = document.getElementById('universal-search-input');
|
||||
if (searchInput) {
|
||||
// Small delay to ensure modal is fully rendered
|
||||
setTimeout(() => {
|
||||
searchInput.focus();
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Hook for search input with auto-focus
|
||||
const SearchInputHook = {
|
||||
mounted() {
|
||||
this.el.focus();
|
||||
},
|
||||
|
||||
updated() {
|
||||
// Maintain focus during updates
|
||||
if (document.activeElement !== this.el) {
|
||||
this.el.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export { SearchHook, SearchInputHook };
|
||||
Reference in New Issue
Block a user