Added scroll-into-view behaviour for slash menu selection

no issue

- when selecting items with arrow keys in the slash menu, scroll the selected item into view if it's not visible
This commit is contained in:
Kevin Ansfield 2020-10-27 16:15:58 +00:00
parent 1e639c2504
commit 79d9179289
2 changed files with 15 additions and 0 deletions

View File

@ -12,6 +12,7 @@
role="menuitem"
title="{{item.label}}"
{{on "click" (fn @itemClicked item)}}
{{did-update this.scrollIntoView (eq item @selectedItem)}}
>
<div class="{{kg-style "cardmenu-icon"}} {{item.iconClass}}" aria-hidden="true">{{svg-jar item.icon class="w7 h7"}}</div>
<div class="{{kg-style "cardmenu-label"}}">{{item.label}}</div>

View File

@ -0,0 +1,14 @@
import Component from '@glimmer/component';
import {action} from '@ember/object';
export default class KoenigMenuContentComponent extends Component {
@action
scrollIntoView(element, [doScroll]) {
if (doScroll) {
element.scrollIntoView({
behavior: 'smooth',
block: 'nearest'
});
}
}
}