web-components
web-components copied to clipboard
[tabsheet] Loading animation is not removed from TabSheet after removing the last tab
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
Encountered this issue in 24.8.0 and also the latest 24.9.0
Browser: Firefox (143.0.1)
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.