mirror of
https://github.com/He4eT/tabswitcher.git
synced 2026-05-05 01:17:23 +00:00
pages/search: focus searchbox in edgecases
This commit is contained in:
parent
eb160fe223
commit
3f644ee959
1 changed files with 15 additions and 3 deletions
|
|
@ -1,4 +1,4 @@
|
|||
const focusButtonsWithArrows = (e) => {
|
||||
const focusButtonsWithArrows = (e, abortCallback) => {
|
||||
if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
|
||||
e.preventDefault()
|
||||
|
||||
|
|
@ -16,16 +16,28 @@ const focusButtonsWithArrows = (e) => {
|
|||
'ArrowUp': -1,
|
||||
}[e.key]) + currentIndex + buttons.length) % buttons.length
|
||||
|
||||
const shouldAbort = [
|
||||
e.key === 'ArrowUp' && currentIndex === 0,
|
||||
e.key === 'ArrowDown' && currentIndex === buttons.length - 1,
|
||||
].some(Boolean)
|
||||
|
||||
if (shouldAbort) {
|
||||
abortCallback()
|
||||
} else {
|
||||
buttons[newIndex].focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const attachInputHandlers = (store) => {
|
||||
const searchBox = document.getElementById('searchbox')
|
||||
const actionbox = document.getElementById('actionbox')
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
focusButtonsWithArrows(e)
|
||||
focusButtonsWithArrows(e, () => {
|
||||
searchBox.focus()
|
||||
})
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
searchBox.focus()
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue