NgbTypeahead component doesn't scroll inside a scrollable component

后端 未结 4 1302
温柔的废话
温柔的废话 2021-01-25 03:11

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

4条回答
  •  感情败类
    2021-01-25 04:03

    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);
        }
      }
    }
    }
    

提交回复
热议问题