web-components icon indicating copy to clipboard operation
web-components copied to clipboard

[tabsheet] Loading animation is not removed from TabSheet after removing the last tab

Open TatuLund opened this issue 3 months ago • 2 comments

Description

When all tabs are removed from a TabSheet, the component displays the loading animation .

Expected outcome

Loading animation should not be visible.

Minimal reproducible example

@Route("tabs-demo")
public class TabsDemoView extends VerticalLayout {

	private static final long serialVersionUID = 1L;

	private final TabSheet tabSheet = new TabSheet();
	private int tabCounter = 1;

	public TabsDemoView() {
		Button addButton = new Button("Add Tab", e -> addTab());
		Button removeButton = new Button("Remove Selected Tab", e -> removeSelectedTab());
		add(addButton, removeButton, tabSheet);
	}

	private void addTab() {
		String tabName = "Tab " + tabCounter;
		VerticalLayout content = new VerticalLayout(new Text("This is content for " + tabName));
		tabSheet.add(tabName, content);
		tabCounter++;
	}

	private void removeSelectedTab() {
		var selected = tabSheet.getSelectedTab();
		if (selected != null) {
			tabSheet.remove(selected);
		}
	}
}

Steps to reproduce

Use the sample code, remove the tabs by clicking the button.

Environment

Vaadin version(s): ?

Browsers

No response

TatuLund avatar Sep 23 '25 05:09 TatuLund

Encountered this issue in 24.8.0 and also the latest 24.9.0

Browser: Firefox (143.0.1)

Bhavith-Kulal avatar Sep 23 '25 10:09 Bhavith-Kulal

Confirmed, here's a reproduction using the web component:

<vaadin-tabsheet>
  <vaadin-tabs slot="tabs">
    <vaadin-tab id="tab-1">Tab 1</vaadin-tab>
    <vaadin-tab id="tab-2">Tab 2</vaadin-tab>
  </vaadin-tabs>

  <div tab="tab-1">Content 1</div>
  <div tab="tab-2">Content 2</div>
</vaadin-tabsheet>

<button>Remove</button>

<script type="module">
  import '@vaadin/tabsheet';

  document.querySelector('button').addEventListener('click', () => {
    const tab = document.querySelector('vaadin-tabsheet vaadin-tab');
    const panel = document.querySelector(`[tab="${tab.id}"]`);
    tab.remove();
    panel.remove();
  });
</script>

Removing selected panel is supposed to show the loading animation when the related tab is not removed. However, when both tab and panel are removed, there shouldn't be a need to show this animation.

web-padawan avatar Sep 23 '25 11:09 web-padawan