Popper-core: How to dynamically position popper with caret offset?

[johndavedecano]

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]

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

[johndavedecano]

@FezVrasta i was wondering if we can position the popper against the caret not the selection.

I am currently working on a project which is https://github.com/johndavedecano/react-mention-plugin

[FezVrasta]

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

[johndavedecano]

@FezVrasta funny :) heres what worked for me https://github.com/johndavedecano/react-mention-plugin/blob/master/src/mentions/Suggestions.js i created an absolute div with z-index -1, width and height of 0 then use that as the reference. Then i just dynamically update its coords using my coords props then invoke popper.scheduleUpdate

[grumd]

OP's problem is rather simple to fix.

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

The issue is that his modifiers have order: 800 which means they are applied AFTER the viewport boundary modifiers are. Just change order: 800 to order: 220 to do it immediately after default offset modifier and it will work fine.

[FezVrasta]

I'm glad to say the ordering system changed in v2 😂