CODEWITHSUNDEEP
reactjsmaterial-uidraggablereact-typescriptpopper.js
Jakub Słowikowski
Jakub Słowikowski

Reputation: 1573

How to make React-Material-UI Popper draggable?

I want to dynamically change Popper position on the screen with react-draggable.

Here's my code:

import PopupState, {bindPopper, bindToggle} from "material-ui-popup-state";

     ...
       return (
            <PopupState variant={"popper"} popupId='demo-popper'>
            {(popupState) => {
                // popupState.anchorEl = undefined <-- THIS WORKS BUT ERROR WITH 'anchorEl' IS RAISED
                return (
                    <div>
                        <Button variant="contained" color="primary" {...bindToggle(popupState)}>
                            Toggle Popper
                        </Button>
                        <Draggable defaultPosition={position}>
                            <Popper {...bindPopper(popupState)}
                                    transition
                                    className={classes.popper}
                                    placement='bottom-start'
                            >
                                <Paper elevation={5}>
                                    <Typography variant={"h2"} className={classes.typography}>
                                        POPUP BODY
                                    </Typography>
                                </Paper>
                            </Popper>
                        </Draggable>
                    </div>
                )
            }}
        </PopupState>
      )

... and CODE Sandbox

As you can see, when I make popupState.anchorEl = undefined dragging functionality works, but error with anchorEl occurs.

Failed prop type: Material-UI: The anchorEl prop provided to the component is invalid. It should be an HTML element instance or a referenceObject (https://popper.js.org/docs/v1/#referenceObject).

When anchorEl is set, <Draggable> is not working. I think that on every component render, caused by dragging, Popup's position is being changed, but it's immediately going back to default, due to set anchorEl

Popper.js docs

Does anyone know how to solve that problem?

Upvotes: 0

Views: 6404

Answers (1)

TheToto
TheToto

Reputation: 116

You do not need to use Popper. Just use the Draggable component with the Paper.

https://codesandbox.io/s/react-material-ui-popup-draggable-forked-lmylb

Upvotes: 2

Related Questions