12.0p+ Tabbing to out-of-viewport element in Window causes white area in showcase

[Blama]

Hi Isomorphic,

I noticed a problem in my application, that I was able to reproduce in a similar way in the online showcase (v12.1p_2022-10-18, but also 12.0p, 13.0p, 13.1d).
It is loosely related to this thread I think.
The problem exists when you have windows where not the whole content is visible.
In my application, when I clicked the last half-visible record in the lower ListGrid, the problem happened. In the testcase, you have to tab to the button HLayout to trigger the effect.
Most likely the testcase is more complicated than it needs to be, but I wanted it to be as close to my application as possible.
Like in the linked thread the effect is, that the showcase is moved partly out of view (see screenshot) and that it also is not moved back after the window is closed.
Also, setting overflow: "scroll" (like in the commented out code in the testcase) does not help.
Please note that the "900" from the sample must be more than your screen height. So perhaps you need to use a bigger value, if you have particularly big screens. I tested with Win10/No zoom/FF 106/4K display.

Steps to reproduce:

• Start sample
• Go to 3rd tab
• Click 2nd ListGrid
• Hit "Tab"-Key to tab to buttons -> white area is visible

Best regards
Blama

isc.HLayout.create({
    width: 300,
    layoutMargin: 5,
    membersMargin: 10,
    members: [
        isc.Button.create({
            title: "Show",
            width: 100,
            click: function() {
                isc.Window.create({
                    ID: "fillScreenWindow",
                    title: "Window",
                    autoCenter: true,
                    // overflow: "scroll",
                    width: "40%",
                    height: "900",
                    items: [
                        isc.TabSet.create({
                            ID: "topTabSet",
                            width: "100%",
                            height: "100%",
                            tabs: [{
                                    icon: "pieces/16/pawn_blue.png",
                                    iconSize: 16,
                                    title: "",
                                    pane: isc.Img.create({
                                        autoDraw: false,
                                        width: 48,
                                        height: 48,
                                        src: "pieces/48/pawn_blue.png"
                                    })
                                },
                                {
                                    icon: "pieces/16/pawn_green.png",
                                    iconSize: 16,
                                    title: "",
                                    pane: isc.Img.create({
                                        autoDraw: false,
                                        width: 48,
                                        height: 48,
                                        src: "pieces/48/pawn_green.png"
                                    })
                                },
                                {
                                    title: "Blue",
                                    icon: "pieces/16/pawn_blue.png",
                                    iconSize: 16,
                                    pane: isc.VLayout.create({
                                        membersMargin: 5,
                                        members: [
                                            isc.ListGrid.create({
                                                ID: "dsListGrid",
                                                width: "100%",
                                                height: "100%",
                                                autoFetchData: true,
                                                dataSource: "supplyItem"
                                            }), isc.ListGrid.create({
                                                ID: "dsListGrid2",
                                                width: "100%",
                                                height: "100%",
                                                autoFetchData: true,
                                                dataSource: "supplyItem"
                                            })
                                        ]
                                    })
                                }
                            ]
                        }),
                        isc.HLayout.create({
                            membersMargin: 10,
                            height: 40,
                            members: [isc.IButton.create({}), isc.IButton.create({}), isc.IButton.create({})]
                        })
                    ]
                })
            }
        })
    ]
});

[Isomorphic]

Hi Blama
What appears to be happening here is that the Window component is taller than the browser window viewport, and when you tab through its content to the last button, the browser puts native focus into that button and has to scroll the browser window / viewport as a whole.

In the showcase the scrollbars on the browser window are suppressed via overflow:hidden in the window body's css, so there's no way as a user to scroll back up once this has occurred. So the white area you're seeing is just the page background below the "100%" sized showcase UI components.

There are various ways you could avoid this in your app, including
- not setting overflow to hidden on your application's bootstrap page
- making the window less tall ("100%", say), and giving it an overflow that allows you to scroll its content
- embedding the window in some parent component with overflow "auto"

Regards
Isomorphic Software