I have a activeWindows
signal defined outside the JSX:
export const activeWindows = signal([
{
index: 1,
title: 'App1',
isMinimized: false,
dimensions: {
...
},
{
index: 2,
title: 'App2',
isMinimized: false,
dimensions: {
...
}
},
....
}
In my parent component:
{
activeWindows.value.map((window) => (
<Fragment key={window.index}>
<AppWindow
idx={window.index}
title={window.title}
isMinimized={window.isMinimized}
dimensions={window.dimensions}
handleClose={() => handleClose(window.index)}
/>
</Fragment>
))
}
handleClose is just removing the given window object from activeWindows:
function handleClose(index: any){
activeWindows.value = activeWindows.value.filter((window) => (
window.index != index
))
}
In my AppWindow, handling of handleClose is very straight-forward. On a button click, it is just executing the method.
Now, the main issue arises when my handleClose is clicked but the re-render is not trigerred everytime. It happens alternatively, if for first window, if it re-rendered then for the second it doesn't then for third it works and so on. At those cases when UI is not re-rendered, my removed object's window is still visible in UI. Its visible until there is any other trigger that can push a re-render. Why is this happening? Even upon successful updation of my activeWindows
, I dont have a successful re-render.
I made lot of hits and trials but none seem to work.