I am using NgbTypeahead component of ng-bootstrap. My problem is, when I put the typeahead component inside a scrollable component and make a scroll down, the position of dropdo
As NgbTypeahead does not have support with scroll, we need to handle from component. Use showDropdownEle function on keydown of Input.
private isElementInViewport(el, inputElem) {
const rect = el.getBoundingClientRect();
const rectElem = inputElem.getBoundingClientRect();
console.log(rectElem);
return (
rect.top >= rectElem.bottom &&
rect.left >= 0 &&
rect.bottom <= (rectElem.bottom + rect.offsetHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
public showDropdownEle(event) {
if (event.keyCode === 38 || event.keyCode === 40) {
if (event.target.nextElementSibling && event.target.nextElementSibling.nodeName === 'NGB-TYPEAHEAD-WINDOW') {
let activeDropdownEle = (event.keyCode === 40) ? event.target.nextElementSibling.querySelector('.active').nextElementSibling : event.target.nextElementSibling.querySelector('.active').previousElementSibling;
if (!activeDropdownEle) {
const allDropdownElems = event.target.nextElementSibling.querySelectorAll('.dropdown-item');
activeDropdownEle = (event.keyCode === 38) ? allDropdownElems[allDropdownElems.length - 1] : allDropdownElems[0];
}
if (!this.isElementInViewport(activeDropdownEle, event.target) && event.keyCode === 40) {
activeDropdownEle.scrollIntoView(false);
}
if (!this.isElementInViewport(activeDropdownEle, event.target) && event.keyCode === 38) {
activeDropdownEle.scrollIntoView(true);
}
}
}
}