react app: issue with having multiple ag-grids within tabs - reactjs

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.

Related

SlotProps not applying to modals properly after Mui update

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.

Marks in mui range Sliders gets duplicated because of two children with the same key

I am experiencing a bug from the range slider of mui wherein the marks get duplicated when both of the thumb slider reached the farthest right.
Initially my slider is like this:
Once I slide both of the thumbs to the farthest right an error will occur on the console:
Then the mark would get duplicated like this:
The cause was that the SliderUnstyled uses the value from marks as its key. Because of this, when both of the thumbs reach the farthest right, both of them would have a value of 100 which triggers the error of duplicate keys.
Here is also a link of a codesandbox from another developer facing the same issue: https://codesandbox.io/s/material-demo-forked-tlu40e?file=/demo.js
I saw a similar issue from Github from this link: https://github.com/mui/material-ui/issues/31960
One solution there was to modify the SliderUnstyled.js file from "material-ui/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js" wherein you need to change the key to the mark's index instead of the mark's value.
I've tried the solution from this https://github.com/mui/material-ui/pull/33526/commits/4ff58040654a4b75aa86691194df80bd2abd87b8 but I just want to ask if there is another solution to this issue wherein modifying the SliderUnstyled.js is not necessary.
Looking at the sandbox you linked and the mui documentation I believe you are using "marks" incorrectly. Marks appear to be used as static markers on the slider. You are instead assigning them to be the value, which does not appear to be necessary.
See: https://mui.com/material-ui/react-slider/
The developers of MUI already fixed this bug in their #mui/material#5.10.8 build. Updating to material 5.10.8 fixed the bug.

Chartjs - Dataset colors are getting overloaded with angular-chartjs

I am using the angularjs wrapper of the Chartjs. I am updating the graph when the new data receive from a push event program. Also I am coloring in-between selected graph data sets.
When I go to another page and come back to the graph page again, the opacity of the color of the dataset getting increased and ultimately opacity goes away.
It seems to me that the data set colors are doesn't get cleared when I revisit the page. However this issue get solved when I refresh the page.
How can I clear the previous data set details when I revisit.
I tried the chart.clear() but didn't work
angular-chartjs is outdated and don't really work with the newer versions of chartJS.
Check this issue out: #677.
The issuer gives an example on how to implement chartJS with a wrapper. You need to be aware of the fact that chartJS alone don't handle the colors anymore. You need to set them on your own.
On the other hand if you really don't want to do it on your own you could try my wrapper implementation for chartJS.

Angular ui.scrollpoint prematurely applying ui-scrollpoint class

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.

ExtJs tab panel random disappear

I've an Ext.tab.Panel that contain in each tab some object (that are Ext.panel.Panel).
When I try to switch between tabs the items contained in the tab random disappear, like in the picture.
Is it a known issue or have I made a mistake?
Thank you
Marco
Thank you for comments.
I was having twice problems reported from zeke ank pllee.
For all people are having the same problem be careful how to use layout. I've set layout fit inside each element, removing all "layout" value it works.
However I've already had also pllee reported problem, with the same problem of layout render. Last time I've solved forcing doLayout() of all component in active tab

Resources