Commit 0841dd86 authored by Marek Kasprzak's avatar Marek Kasprzak
Browse files

fix menu positioning when text goes out of bounds of input or textarea (scrolled)

parent 7cee78a1

src/mention/mention-list.component.ts

+17 −2
Original line number Diff line number Diff line
@@ -52,6 +52,7 @@ export class MentionListComponent implements OnInit { 
  items = [];

  activeIndex: number = 0;

  hidden: boolean = false;

  private blockCursorSize;

  constructor(private element: ElementRef) {}



  ngOnInit() {
@@ -64,10 +65,13 @@ export class MentionListComponent implements OnInit { 
  position(nativeParentElement: HTMLInputElement, iframe: HTMLIFrameElement = null, dropUp: boolean) {

    let coords = { top: 0, left: 0 };

    if (isInputOrTextAreaElement(nativeParentElement)) {

      const blockCursorSize = this.getBlockCursorDimensions(nativeParentElement);

      const scrollToHeightDiff = (nativeParentElement.scrollHeight - nativeParentElement.clientHeight);

      const scrollToWidthDiff = (nativeParentElement.scrollWidth - nativeParentElement.clientWidth);

      // parent elements need to have postition:relative for this to work correctly?

      coords = getCaretCoordinates(nativeParentElement, nativeParentElement.selectionStart);

      coords.top = nativeParentElement.offsetTop + coords.top + 16;

      coords.left = nativeParentElement.offsetLeft + coords.left;

      coords.top = nativeParentElement.offsetTop - scrollToHeightDiff + coords.top + blockCursorSize.height;

      coords.left = nativeParentElement.offsetLeft - (scrollToWidthDiff ? scrollToWidthDiff + blockCursorSize.width : 0) + coords.left;

    }

    else if (iframe) {

      let context: { iframe: HTMLIFrameElement, parent: Element } = { iframe: iframe, parent: iframe.offsetParent };
@@ -134,4 +138,15 @@ export class MentionListComponent implements OnInit { 
  resetScroll() {

    this.list.nativeElement.scrollTop = 0;

  }



  private getBlockCursorDimensions(nativeParentElement) {

    if (this.blockCursorSize) {

      return this.blockCursorSize;

    }

    const parentStyles = window.getComputedStyle(nativeParentElement);

    return {

      height: parseFloat(parentStyles.lineHeight),

      width: parseFloat(parentStyles.fontSize)

    };

  }

}