[Popper] anchorEl as fake DOM element

[dispix]

• This is a v1.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

@material-ui/core/Popper should be positionable, similar to the popover which uses anchorPosition.

Current Behavior

The only available positioning is through placement, which makes impossible to place the popover inside the anchor element.

Examples

My use case is for an element that pops up when the user selects some text. It is doable at the moment with the popover element by manipulating a couple of props and styles to remove the background (which was unnecessary, disturbing even in this case).

So right now, using the popover element is doable but requires a little bit of hack to get me where I want to go. Without the "hack", the backdrop inherited by the modal component will block any user interaction with the rest of the page. A simpler solution in my opinion would be to allow the popper element to be placed relative to the page and/or anchor element.

Demo : https://codesandbox.io/s/ppww439wzm (the popover works, the popper doesn't since it cannot be placed inside the anchor element).

Context

See the example. My need was to create a popover element under a text selection.

[oliviertassinari]

My use case is for an element that pops up when the user selects some text.

@dispix I don't understand, why using the Popover or the Popper component for this use case? Why don't you use a combination of Portal + Grow + Paper?

[dispix]

My understanding is that either the popper (or the popover) was adapted for that use case. If I misunderstood the way they were designed then maybe this feature request doesn't make much sense.

[oliviertassinari]

@dispix The Popper & Popover positioning strategy works well with a reference element. When people already have the absolute position, it's much easier. However, you should be able to get along with it like this:

        <Popper
          transition
          onClick={this.reset}
          open={open}
          placement="bottom-start"
          anchorEl={{
            clientWidth: selection.boundingClientRect.width,
            clientHeight: selection.boundingClientRect.height,
            getBoundingClientRect: () => selection.boundingClientRect
          }}
        >
          {({ TransitionProps }: any) => (
            <Fade {...TransitionProps} timeout={{ enter: 350, exit: 0 }}>
              <Paper>{renderContent(this.state.selection, this.reset)}</Paper>
            </Fade>
          )}
        </Popper>

https://codesandbox.io/s/r2vqkypoq (sorry for the TypeScrip errors)

This use case is pretty close to #1462. I think that we could add a demo about it. The TypeScript definition of anchorEl nor the description are accurate:

The referenceObject is an object that provides an interface compatible with Popper.js and lets you use it as replacement of a real DOM node.
You can use this method to position a popper relatively to a set of coordinates in case you don't have a DOM node to use as reference.

https://popper.js.org/popper-documentation.html#members

[oliviertassinari]

@dispix Does that help? Going forward, I think that we should be:

• Updating the anchorEl description and TypeScript definition to match reality
• Add a fake anchorEl demo in the Popper documentation page. Your codesandbox is a good starting point!

Do you want to work on it? :)

[dispix]

Yes that actually helps a lot ! The bindings between the Popper element and popper.js are quite obscure. I'd be glad to help on the matter.