IgniteUI/igniteui-dockmanager

Maximizing one of two content panes and then unpinning maximizes the second pane as well then unpinning both leads to unclickable panes

Closed this issue · 4 comments

Description

We have three content panes arranged as follows: the first is on the left of the screen and the other two on the right. We open the left pane and one of the right side by side. Maximize one, then unpin it, this leads to maximizing the second pane after it, as well. After which, when we unpin the second pane, it is discovered that the first was not actually unpinned, but is again in the maximized size. After unpinning again the first pane, all panes in the dock-manager are now on the left side of the screen and are unclicable.

  • version: 1.13

Steps to reproduce

  1. Go to this sample.
  2. Open Pane1 and Pane2.
  3. Maximize one of the two opened panes.
  4. Unpin the maximized pane.
    4.1. Observed that the other pane has also been maximized and is currently displayed in full screen.
  5. Unpin the other maximized pane.
    5.1 Observed that the first pane wasn't actually unpinned and now it appears maximized to full screen.
  6. Now unpin again the first pane.
  7. Observed that now all panes are at the left of the screen and not with their previous arrangement as they are unclickable as well.

Result

After opening two content panes and maximizing one, unpinning that maximized pane also maximizes the other pane. After unpinning the second pane, we can see on now that the first one was not unpinned and remains maximized behind. Finally, after unpinning the first one for the second time, all panes move to the left of the screen and are unclickable.
result

Expected result

After opening two content panes and maximizing one, when unpinning that maximized pane, it should unpin, return to its previous position and size, and not maximize the second pane after it. And when unpinning after that, both panes should return to their previous position and not to the left of the screen, as well as being clickable.
expected

After investigating, I discovered that there was indeed an issue with maximizing and pinning unpinned panes, which was introduced in feature #60.

Basically what happens is when you maximize a pane, a property called isMaximized is set. This property helps us to keep track of the maximized pane (if there is one) when saving the layout, so that when you load the layout, the pane will be maximized again, just like before.

However, when you maximize an unpinned pane and then try to pin it, nothing happens with isMaximized so the pane remains maximized instead of flying out unpinned. See the GIF below for reference.

chrome-capture-2023-6-13

I also came across another issue in the attached sample, particularly in this part of the connect function:

if (!eventPane.isPinned) { event.detail.pane.isPinned = true; }

What this code does is that when you have a maximized pane and try to unpin it, the paneHeaderConnected event will be emitted, causing this pane to be pinned again. As a result, even though you won't experience layout problems like in the GIF you attached, you still won't be able to unpin the pane correctly.

In the sample code we attached, we've already added the code as you mentioned above
if (!eventPane.isPinned) { event.detail.pane.isPinned = true; }
But it seems doesn't work as we expected. So it would be helpful if you can edit the above sample code and give it back to us.

image

@Hungnguyen1212,

This particular code snippet is the reason why panes are not being unpinned correctly. When a pane is both pinned and maximized, attempting to unpin it will cause the pane header to re-render, triggering paneHeaderConnected. Consequently, this piece of code will always re-pin a maximized pane that you try to unpin.

Other than that, the initial issue that was causing the layout to break and become unclickable has been resolved and will be included in the next release.

Fixed in v1.14.2.