How to dynamically position popper with caret offset?

What is the expected behavior?

I am trying to build an auto suggestion or mention plugin using popper.

1. Popper position should update on caret position updates e.g on textarea.
2. If popper reaches view port boundary position should also update.

What went wrong?

Right i can update the position but i cannot do the view port boundary

    this.popper = new Popper(this.ref, this.popEl, {
      removeOnDestroy: true,
      modifiers: {
        preventOverflow: {
          enabled: true,
        },
        updatePosition: {
          enabled: true,
          order: 800,
          fn: data => {
            console.log(this.props.coords);

            return {
              ...data,
              styles: {
                ...data.styles,
                top: this.props.coords.top + 20,
                left: this.props.coords.left - 25,
              },
            };
          },
        },
        showPopper: {
          enabled: true,
          order: 850,
          fn: data => {
            return {
              ...data,
              styles: {
                ...data.styles,
                display: this.props.isOpen ? 'block' : 'none',
              },
            };
          },
        },
      },
    });

[FezVrasta]

I think the API is the same, you can adapt my code.

[FezVrasta]

This should help https://codepen.io/FezVrasta/pen/YEVrGP