Global search keyboard shortcut

[llamafilm]

NetBox version

v4.0.8

Feature type

New functionality

Triage priority

This is a very minor change

Proposed functionality

Pressing the slash / key from any webpage should move the cursor to the global search box, unless another text field already has focus. This is a common convention across many web services including Gmail and GitHub.

Use case

Nine times out of 10, the first thing I do when opening Netbox is click on global search. I've arrived the page using the keyboard (typing the URL), so it's un-ergonomic to move to the mouse for one click and then move back to the keyboard to type.

Database changes

No response

External dependencies

No response

[ITJamie]

This was also brought up in #12749 (comment)

[jeremystretch]

One note on implementation: This will need to be done in a proper TypeScript model (as opposed to JS embedded in the HTML source).

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. NetBox is governed by a small group of core maintainers which means not all opened issues may receive direct feedback. Do not attempt to circumvent this process by "bumping" the issue; doing so will result in its immediate closure and you may be barred from participating in any future discussions. Please see our contributing guide.

[github-actions]

This issue has been automatically closed due to lack of activity. In an effort to reduce noise, please do not comment any further. Note that the core maintainers may elect to reopen this issue at a later date if deemed necessary.

[llamafilm]

Since this FR wasn't accepted, I've patched base.html with this code on my server and it's a huge timesaver. If there is interest, I could try making this into a proper typescript module.

<script type="text/javascript">
// If the '/' key is pressed, focus the global search input
document.addEventListener('keydown', (event) => {
  if (event.target.matches('input, textarea, select') || document.body.classList.contains('modal-open')) {
    return;
  }
  if (event.key === '/') {
    const searchInput = document.querySelector('header input[name="q"]');
    console.log('Focusing search input');
    searchInput.focus();
    event.preventDefault();
  }
});
</script>