Previous tab show selected

Flow
1

I’ve two tabs as shown below

image
image804×624 50.7 KB

When I move from tab B to tab A, tab B is still showing as selected though I set tab A as setSelected(true);.

The expectation is, when I click a grid row, the right side view show the overview. To achieve that here is the code I wrote

 OVERVIEW_TAB.setSelected(true);
        gridDetailView.setDetailContentMenuBody(OVERVIEW_TAB.getLabel());
        gridMainView.getBeanListing().addItemClickListener(unitItemClickEvent -> {
            OVERVIEW_TAB.setSelected(true);
            gridDetailView.setDetailContentMenuBody(OVERVIEW_TAB.getLabel());

        });

Everything is fine but when I switch to Edit and then click a row grid, the overview tab show as selected and EDIT tab too

Should I manually set selection as false for all other tabs ?

2

Did you use a Tab sheet? If not: that’s your Problem.

3

Switched to tabSheet but still same result

TabSheet tabSheet = new TabSheet();
            tabSheet.setWidthFull();
            tabSheet.add(OVERVIEW_TAB, createOverview());
            tabSheet.add(EDIT_TAB, editUnit());
            tabSheet.setSelectedTab(OVERVIEW_TAB);
            return tabSheet;

Also it is not switching content dynamically. I mean, when clicking a row on the left, the right side tab content is NOT getting updated automatically though I’ve set to get the content from the grid selectedItem.

4

The tabs are not getting switched when not clicking the selected Tab first. Once I click, it works which is not looking good. Any fix ?

5

But your approach is a bit strange.

With the TabSheet, the first tab is selected by default without making you…

I think you are overcomplicating things.

The TabSheet object, create it as an instance variable better, personal opinion…

Then you create each tab as you wish.

Or each click on each item, generates the TabSheet for each one, right?

6

Did you try tabSheet.setSelectedTab? This pushes the selected tab to the Tabs component, which should take care of deselecting other tabs.
Using tab.setSelected only pushes the state only to it self.

7

When opening a page I want to show the first tab automatically without any user click. The page looks like this

image
image841×532 42.2 KB

Also when user click a row, I want the first tab to autopopulate respective row data in detail. That’s the reason I manually set tab selection.

I tried using TabSheet as well but it is not working for my requirement. Here is the code I use

tabSheet = new TabSheet();
            tabSheet.add(OVERVIEW_TAB, createOverview());
            tabSheet.add(EDIT_TAB, editUnit());
            tabSheet.addSelectedChangeListener(selectedChangeEvent -> {
                log.info("Clicked tab {}", selectedChangeEvent.getSelectedTab().getLabel());
            });

When user clicks, I set the tabSheet.setSelectedTab(OVERVIEW_TAB); but the tab shows old data. It is not even entering its Component method to fetch the latest row details. Since I’ve these challenges I moved to the classic Tab component. In that switching is not working always.

When user clicks on a grid row, the first tab is set selected to true and when clicking the next tab, it is not switching. The user has to click first tab and then the other, then it works which seems not correct. Not sure what is the right way to achieve this

8

Okay, I see where you coming from. Are you using Tabs? Or are just adding the Tab component in a layout?

10

I think the same applies to the taba component.