K
K
karmyskove2021-12-23 08:23:11
React
karmyskove, 2021-12-23 08:23:11

How to enable events for Popper material ui?

Hello! How to enable events for Popper material ui? I came across an article: https://question-it.com/questions/2796767/onclick-... , they suggest passing interactive, the problem is that Popper does not have such props. I looked in the documentation, there is nothing similar. Below I will give an example of how I do it, in the console there is zero reaction.

<Popper
        keepMounted
        onMouseMove={() => console.log("asd")}
        open={openSubMenu}
        anchorEl={anchorSubMenuEl}
        placement="right"
        transition
      >
        {textSubMenu &&
          (({ TransitionProps }) => (
            <Fade {...TransitionProps} timeout={350}>
              <PopperContainer>{textSubMenu}</PopperContainer>
            </Fade>
          ))}
      </Popper>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexey Ukolov, 2021-12-23
@karmyskove

Event Listeners
You can also have Popper automatically update the position when certain events are fired, to learn more visit the Event Listeners Modifier page.
Hook into the lifecycle
There are situations where you may need to hook into the Popper's lifecycle to perform some additional logic.
If all you need is a callback ran after Popper positioned the element the first time, you can define the onFirstUpdate property in the Popper options:
createPopper(referenceElement, popperElement, {
  onFirstUpdate: state => console.log('Popper positioned on', state.placement),
});

If, instead, you want to run some logic on each update cycle, the best way to do that is to define your own custom modifier.
If you want to make sure to run your logic after all the other modifiers have ran, we suggest to set afterWrite as your custom modifier's phase.
https://popper.js.org/docs/v2/lifecycle/#event-lis...
popperOptions - Options provided to the Popper.js instance.
https://mui.com/api/popper
Then everything depends on your specific task.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question