Hidden tab issue

[Sanmargar]

I found, probably a bug related to the hidden tab. When there are three tabs (or more), the second one is hidden. When you click and select the third one (actually the second visible one) and close it, the content disappears in the first one.

SmartGWT 13.1d 2024-02-06
macOS 13.2.1
Chrome 121.0.6167.139 , Safari 16.3

Tab t1 = new Tab("t1");
Tab t2 = new Tab("t2");
Tab t3 = new Tab("t3");
t1.setPane(new Label("This is 1st Tab"));
t2.setPane(new Label("This is 2nd Tab"));
t3.setPane(new Label("This is 3rd Tab"));

//important piece of code:
t2.setHidden(true);
t3.setCanClose(true);

TabSet ts = new TabSet();
ts.addTab(t1);
ts.addTab(t2);
ts.addTab(t3);

VLayout vl = new VLayout();
Label lb = new Label("Three tabs. The second one is hidden. When you click the third one (actually the second visible one) and close it, the content disappears in the first one.");
vl.addMembers(lb, ts);

[claudiobosticco]

I'm not sure that you can actually set the tab.hidden property after init.
In the SmartClient doc, the hidden property is marked as Writable, but says that you must use tabSet.hideTab(tab) at runtime:



Isomorphic is that 'W' correct for Tab.hidden ?

[Sanmargar]

Thank you for your valid point.

I used hideTab(tab) but the effect is the same.

        Tab t1 = new Tab("t1");
        Tab t2 = new Tab("t2");
        Tab t3 = new Tab("t3");
        t1.setPane(new Label("This is 1st Tab"));
        t2.setPane(new Label("This is 2nd Tab"));
        t3.setPane(new Label("This is 3rd Tab"));

        //important piece of code:
        t3.setCanClose(true);

        TabSet ts = new TabSet();
        ts.addTab(t1);
        ts.addTab(t2);
        ts.addTab(t3);

        ts.hideTab(t2);    //               <-----------------

        VLayout vl = new VLayout();
        Label lb = new Label("Three tabs. The second one is hidden. When you click the third one (actually the second visible one) and close it, the content disappears in the first one.");
        vl.addMembers(lb, ts);

[claudiobosticco]

ok, and I can confirm the same behaviour in SmartClient, with the latest 13.0 and 13.1

[Isomorphic]

Hi guys, the tab is not blank, it's just that after the removal of the focused tab, no tab is selected. You can tell because of the styling. If you just click any remaining tab, you'll see its contents.

When the selected tab is removed, we don't automatically select some other tab because:

1) it's not clear which tab to go to. First tab? Most recently selected tab? In the case of one remaining tab, it's obvious that's the only one to select, but that's not a solution that works for other situations, so we don't special-case the "one remaining tab" case. We want to leave it to application code to figure out which tab to go to, if any.

2) selecting a tab can be a very expensive operation, since many apps build interfaces and do data fetches when a tab is initially selected, so arbitrarily picking a tab could be a big problem in some apps

[claudiobosticco]

makes sense, so this is the method to implement https://smartclient.com/smartclient-...Set.closeClick

[Sanmargar]

1. That's not exactly how it works. If tab T2 is not hidden and I select and close tab t3, TabSet set the focus to the previous tab (T2).
The previous tab is always selected after closing next one. It's ok. So there is implemented a rule that decides which tab to select after closing.
The problem only occurs if the earlier one is hidden.
In the example, I created 3 tabs, but if we add a few more, the problem is the same.
For example, Excel and many other apps work the same way. In Excel, tabs (sheets) can be hidden. Then, after closing, the focus is always on the previously visible one.

2. I extended the example. Now there are 6 tabs. From T0 to T5. When I select and close T5. The focus moves to T4. When I close T4, the focus moves to T3. When I close T3 the state is undefined.

Tab t0 = new Tab("t0");
        Tab t1 = new Tab("t1");
        Tab t2 = new Tab("t2");
        Tab t3 = new Tab("t3");
        Tab t4 = new Tab("t4");
        Tab t5 = new Tab("t5");
        t0.setPane(new Label("This is 0 Tab"));
        t1.setPane(new Label("This is 1st Tab"));
        t2.setPane(new Label("This is 2nd Tab"));
        t3.setPane(new Label("This is 3rd Tab"));
        t4.setPane(new Label("This is 4rd Tab"));
        t4.setPane(new Label("This is 5th Tab"));

        //important piece of code:
        t1.setCanClose(true);
        t2.setCanClose(true);
        t3.setCanClose(true);
        t4.setCanClose(true);
        t5.setCanClose(true);

        TabSet ts = new TabSet();
        ts.addTab(t0);
        ts.addTab(t1);
        ts.addTab(t2);
        ts.addTab(t3);
        ts.addTab(t4);
        ts.addTab(t5);

        ts.hideTab(t2);

        VLayout vl = new VLayout();
        Label lb = new Label("Three tabs. The second one is hidden. When you click the third one (actually the second visible one) and close it, the content disappears in the first one.");
        vl.addMembers(lb, ts);

4. This works :) Previously, I made the CloseClickHandler method on Tab and not TabSet . The same implementation on tab was not setting focus for some reason.:

ts.addCloseClickHandler(new CloseClickHandler() {
            private final TabSet thisTabSet = ts;
            @Override
            public void onCloseClick(TabCloseClickEvent event) {
                Tab t = event.getTab();
                int closingTabPos = thisTabSet.getTabNumber(t.getID());
                for (int i = closingTabPos + 1; i < thisTabSet.getNumTabs(); i++) {
                    Boolean hidden = thisTabSet.getTab(i).getHidden();
                    if (hidden == null || !hidden) {
                        ts.selectTab(i);
                        return;
                    }
                }
                for (int i = closingTabPos - 1; i >= 0; i--) {
                    Boolean hidden = thisTabSet.getTab(i).getHidden();
                    if (hidden == null || !hidden) {
                        thisTabSet.selectTab(i);
                        return;
                    }
                }
            }
        });

[Sanmargar]

ISC_Containers.js
removeTabs : function (tabs, dontDestroy)

This piece of code is responsible for selecting the next tab after closing. As you can see, it selects tab number 2 without checking whether it is not hidden.
The comment obove code is inaccurate. As the code shows It selects next or last, if there is no next. Not "the first".





Then, in the seletTab method, "hidden" is checked as follows: