MUI Dialog - React does not recognize the anchorPosition prop on a DOM element.

[mightym]

I'm using material-ui-popup-state on a MUI Dialog. And I'm getting those warnings:

Warning: React does not recognize the `anchorEl` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `anchorel` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Warning: React does not recognize the `anchorPosition` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `anchorposition` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

React does not recognize the `anchorReference` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `anchorreference` instead. If you accidentally passed it from a parent component, remove it from the DOM element

Is this something I can ignore or am I doing something wrong here?

[jedwards1211]

those are props for a Popover or Menu so you're probably passing the wrong props to the Dialog; make sure you're passing variant: 'dialog' to usePopupState() and passing {...bindDialog(popupState)} props to the <Dialog>. If that still doesn't work I'll need to see the code to tell what's going wrong.

[mightym]

This is my popupState and the according render function:

const popupState = usePopupState({
   variant: 'dialog',
   popupId: 'settingsDialog',
});

return (
  <SettingsDialog
     popupState={popupState}
  />
);

and this my Dialog Component:

export const SettingsDialog = ({
  popupState,
}) => {
  return (
    <Dialog
      {...bindMenu(popupState)}
    >
      <DialogTitle onClose={popupState.close}>
        Settings
      </DialogTitle>
    </Dialog>
  )
};

[mightym]

Oh I just realize there is another Warning/Error:

[material-ui-popup-state] WARNING – "eventOrAnchorEl should be defined if setAnchorEl is not used" printWarning — react-dom.development.js:86

Maybe I'm doing something wrong there...

[jedwards1211]

Here's what to do

    <Dialog
-      {...bindMenu(popupState)}
+      {...bindDialog(popupState)}
    >

[mightym]

Oh @jedwards1211 ... thanks a lot :)

[mightym]

@jedwards1211 and the error about

[material-ui-popup-state] WARNING – "eventOrAnchorEl should be defined if setAnchorEl is not used"

can be ignored or do I need to set eventOrAnchorEl ?

[jedwards1211]

Oh thanks for asking, looking at the code, I need to prevent it from warning about that when variant: 'dialog' is used.

[jedwards1211]

🎉 This issue has been resolved in version 5.0.7 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀