I tried to update Mui from version 5.10 to 5.11.7, and one of the changes included was adding a SlotProps UI. The slotprops is broken somehow, and is getting inserted into the DOM of all mui modals instead of correctly giving them a backdrop - as a result, modals can't be closed unless there's some kind of close button in them to use manually.
I'm having trouble even approaching how to debug this. Any ideas would be appreciated.
This error is present in the console and the problem is because of this enter image description here getting added to the DOM, but I can't find results googling for this and I'm having trouble debugging it. It happens even if I insert a totally unstyled modal with nothing going on into a page.
Related
I'm trying to find a reliable way to find out if the slate editor is currenty focused or not. The editor should be in a focused state even when nested elements are selected.
I've tried
ReactEditor.isFocused(editor)
But am seing really inconsistent results. Often this will yield true even if the editor is not selected. Also, no rerender seems to be triggered when the editor focus changes.
Is there a reliable way to do this?
Have you tried useFocused hook from Slate?
https://docs.slatejs.org/libraries/slate-react#usefocused
I'm using react-big-calendar (in my next.js project) and as you can see in the image above I'm displaying events on it and I have a bug that I can't understand why its happening.
When I press on the +3 more (which shows me all the events happening on the given day) then the dropdown menu that you can see on the top right image opens and then instantly closes and even if I change page it still gives me the same bug and it happens to all the dropdowns that I have on the website I'm working on.
Now one "hack" is to make the min height of the calendar bigger (I can make it 900px instead of the current 700px) so that all 4 events are shown directly instead of showing the +3 more but the problem with this "hack" is that imagine I have A LOT of events on a given day then I would need to set the min height to really really big number which is undesirable.
Note that the bug disappear if I reload the page but obviously I just can't force the user to reload every time he wants to see more events on a given day.
Which version of React-Big-Calendar are you using? Older versions of RBC used an anchor tag, for the 'more', that had an href="#". I could see that causing issues like this. Current version has replaced this code with a 'button' component styled to look like an anchor.
I am trying to add a bool property to a form that is toggled on/off depending on the click of button1 or button2.
When I do this codesandbox on my local setup, I get the react setState error but only on the first click.
Warning: Can't call setState on a component that is not yet mounted.
I imagine it is because invoking input.onChange is not expected. What is the best way to accomplish the custom input?
I don't find anything wrong with the downloaded setup from above sandbox on my local.
Probably, you have updated the code after finding a fix. Please let people know the solution if your issue is resolved or close it
I have a react app which uses multiple ag-grids, some within tabs.
As per this issue raised for ag-grid, when you have multiple ag-grids, some hidden within tabs, you can get warnings on console relating to zero width columns:
ag-Grid: tried to call sizeColumnsToFit() but the grid is coming back with zero width, maybe the grid is not visible yet on the screen?
Does anyone have any advice on how to resolve this? The original poster simply switched to having one grid which I cannot do
As far as I'm aware, I can run the app just fine even with the warning, but I was hoping to try and fix it in case it produces unexpected issues in the future
I was having this issue but turned out to be a bug where I was accidentally setting gridApi to undefined temporarily while switching grid data source.
This has been frustrating me for hours – so time to turn to the good people of SO.
In my angular app I am using ui-scrollpoint to affix a sidenav once it is scrolled to the top of the screen. It is working as intended when using an absolute scrollpoint value (ui-scrollpoint="150") but not when using a relative value (ui-scrollpoint="-100").
The problem at the moment is that the ui-scrollpoint class is applied to the element when the view is loaded (I am using ui-router), even when it shouldn't be.
Even more frustrating is that I haven't been able to recreate the problem in Plunker - here I have mocked the layout of my app - but ui-scrollpoint works as one would expect.
What could be causing this erroneous behaviour? (Documentation is non-existent)
Does the ui-scrollpoint's parents all need to be display: block and
or position: absolute? (Although I've tried this.)
Does it not work in nested states? (The plunker shows that this is
ok.)
Does it not work inside custom and/or transcluded directives. (Again - the plunker shows that this is ok.)
What styling might be on the various parent elements to make this not work?
The only thing I can think is that the class is set permanently somehow when the directive is compiled before rendering / insertion.
When ui-scrollpoint="" or ui-scrollpoint="0", the page renders correctly, but the class gets added as soon as the page is scrolled, even if the element is further down the page.
When ui-scrollpoint="-100", the class is applied from the beginning. It's as if the browser thinks the window has already scrolled past the element.
Help appreciated!
After no luck recreating the issue on Plunker and trying to find the root cause (which wasn't my custom directives and wasn't my layout), I thought to re-download and install the latest scrollpoint.js.
It is now working. Perhaps a bug in an old version. Perhaps I mistakenly edited my local copy.