material-ui-popup-state | common Material-UI Menu | Menu library

I am trying to build react prod docker container with Azure DevOps pipelines. After I upgrade my build environment and code, Pipeline failed. After some research I add "--node-flags --max-old-space-size=8192" statement my build command. But it didn't matter. I also try tried relevant node containers for a build, it didn't work.

The Major scenario is I want to have a timer for getting new notifications, but sometimes I need to get notifications out of interval cycle that I have defined, so I put it in a useEffect wrapper, And I made a state in a customHook so I can change it from other components and I use that sate in my useEffect hook dependency list. Now I expect Compo1 to re run useEffect but it's not happening...

I have a project with this package.json:

I have a React app created with CRA, it compiles and runs fine. But production build made with yarn buld and served with serve -s build shows following error in console:

I'm working on a calendar app.

The problem: clicking popper of a popper closes both poppers, because it fires the click outside event of the first popper which closes it.

I have a component which uses Material-UI React and it works fine with it. combining it with the it closes when clicking out side, and stay open when clicking inside the popper. I created which is a list of .

when click the + more text, popper with all the events in that day should appear, on top of the cell.

the popper children is also :

clicking an event should open a popper with the event details, as clicking it in the cell was. since i use the same component it does that, but not fully as expected:

clicking the event details popper closes both poppers.

That is the issue: the requirement is that clicking out side of the poppers will close the poppers, but clicking inside will leave them open and interactive

debugging shows that clicking the second popper, fires the outside clicked event of the first popper which closes it. also, taking out the click away listener function from the first popper leave the second popper open for most of the clicks - clicking some places in it, fires it's clicked away function which closes it. e.g: clicking the title closes it, clicking the location or summary divs does not.

1. I tried wrapping the entire cell with .
2. I tried wrapping the children of the popper with
3. Tried using the material-ui-popup-state npm, and gave the popper id attribute. than when click away, compare the target id to 'popper', and if equal stay open. but, the id that was extracted from the event object of onClickAway event was empty string. even when clicking the popper.

CODE

- costume wrapper for the material ui popper

I'm implementing a menu that opens when the user clicks on an Avatar. The problem is that the menu is rendering in a completely different place:

The avatar is the green "OB" button on the right. There is no console error and inspecting the Popover element, it's receiving the anchorEl prop:

The language menu, on the right of the avatar, renders just fine, opening where it should open. My code seems fine, I'm really not sure why the position is wrong: