vaadin / vaadin/framework

Firefox does not retain browser's scroll position when switching tab in TabSheet

Open
#12,551 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
Java
Stars
1.8k
Forks
717
Avg merge
2d 6h
Merged PRs (30d)
3

Description

Hello!

There seems to be a problem with Firefox retaining browser's scroll position when switching tab in TabSheet component.

Vaadin Framework version 8.16.1 (the problem was originally found with 8.14.3)
Debian 10 (buster) Linux: latest versions of Firefox (and Chromium)
Windows 10: latest versions of Firefox (and Chrome)

In my test I had a VerticalLayout where I first had 25 filler (Label) rows to get a vertical scroll bar to appear in browser and then a TabSheet containing two tabs with 10 tab (Label) rows in each of them.

Test steps:

  1. Scroll to bottom of page to see the TabSheet
  2. Click tab 2 to switch tab

Expected behavior (Chrome and Chromium): scroll position is retained, full tab 2 content is visible
Actual behavior (Firefox): scroll position is not retained. Scroll bar jumps upwards and only first line of tab 2 content is seen.

Please see below the simple test code the case can be re-produced with.

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        
        VerticalLayout layout = new VerticalLayout();
        
        for (int i = 1; i <= 25; i ++) {
            layout.addComponent(new Label("filler row " + i));
        }
        
        TabSheet tabSheet = new TabSheet();
        
        for (int i = 1; i <= 2; i ++) {
        
            VerticalLayout tabLayout = new VerticalLayout();
            
            for (int j = 1; j <= 10; j ++) {
                tabLayout.addComponent(new Label("tab row " + j));
            }
            
            tabSheet.addTab(tabLayout, "tab " + i);
            
        }
        
        layout.addComponent(tabSheet);
        
        setContent(layout);
        
    }

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reproducible TabSheet example in the issue and compare tab switching behavior in Firefox with Chrome or Chromium. The work is done when switching tabs retains the browser's scroll position in Firefox and the full second-tab content remains visible.

Written by the indexing model from the issue text.

Assessment

Tech stack
java
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.