Scroll a component's window with arrow keys

1

I’m working on an autocomplete window that’s 300px high. Sometimes the content within it causes that window to scroll - which is desired behavior.

I’ve added keyDown functions so that the items in the window can be highlighted by navigating to them with the up and down arrow keys (I set an isActive flag to the item, and if true, an ‘active’ class is toggled which highlights the item). That all works fine.

The problem is, when you arrow down to the items at the bottom of the window, the window doesn’t scroll. I know I need to wire that up, I’m just not sure how.

How can I cause the window to scroll with ember rather than having to manipulate from the DOM end?

2

RTFM I guess. This works:

didRender() {
	this._super(...arguments);
	if (get(this, 'suggestActive') && $(".autocomplete-suggestion.active").length > 0) {
		$('.autocomplete-suggestions').scrollTop($('.autocomplete-suggestion.active').offset().top);
	}
}