Enhance keyboard navigation for suggestions dropdown by adding suppor…

…t for PageUp, PageDown, Home, and End keys. This allows users to navigate through suggestions more efficiently without using the mouse.
yairEO · Dec 7, 2024 · 719827b · 719827b
1 parent 1cd4459
commit 719827b
Showing 1 changed file with 28 additions and 0 deletions.
diff --git a/src/parts/suggestions.js b/src/parts/suggestions.js
@@ -75,6 +75,34 @@ export default {
                                 // selectedElm.scrollIntoView({inline: 'nearest', behavior: 'smooth'})
                                 break;
                             }
+                            case 'PageUp':
+                            case 'PageDown': {
+                                e.preventDefault()
+                                const dropdownItems = this.dropdown.getAllSuggestionsRefs()
+                                const itemsPerPage = Math.floor(this.DOM.dropdown.content.clientHeight / dropdownItems[0]?.offsetHeight) || 1
+                                const isPageUp = e.key === 'PageUp'
+
+                                if (selectedElm) {
+                                    const currentIndex = dropdownItems.indexOf(selectedElm)
+                                    const targetIndex = isPageUp
+                                        ? Math.max(0, currentIndex - itemsPerPage)
+                                        : Math.min(dropdownItems.length - 1, currentIndex + itemsPerPage)
+                                    selectedElm = dropdownItems[targetIndex]
+                                } else {
+                                    selectedElm = dropdownItems[0]
+                                }
+
+                                this.dropdown.highlightOption(selectedElm, true)
+                                break;
+                            }
+                            case 'Home':
+                            case 'End': {
+                                e.preventDefault()
+                                const dropdownItems = this.dropdown.getAllSuggestionsRefs()
+                                selectedElm = dropdownItems[e.key === 'Home' ? 0 : dropdownItems.length - 1]
+                                this.dropdown.highlightOption(selectedElm, true)
+                                break;
+                            }
                             case 'Escape' :
                             case 'Esc': // IE11
                                 this.dropdown.hide();