slint-ui / slint

Slint is a declarative GUI toolkit to build native user interfaces for Rust, C++, or JavaScript apps.
https://slint.dev
Other
16.94k stars 568 forks source link

Focus on `StandardListView` isn't visible #3548

Closed FireFragment closed 9 months ago

FireFragment commented 12 months ago

Focused StandardListView is indistinguishable from an unfocused one, making it impossible to tell, whether a list is focused. This happens with all three styles (fluent, material, and native).

Video

Here is a video of how the code below behaves:

https://github.com/slint-ui/slint/assets/55660550/1e83a75f-7fc0-40b0-8fe2-e78b43b5f246

To reproduce

Launch the following code and repeatedly press the TAB key. You can see, that buttons and checkbox are highlighted correctly when focused, while the list is not.


import { Button, CheckBox, VerticalBox, StandardListView, HorizontalBox} from "std-widgets.slint";
export component Test {
    height: 250px;
    VerticalBox {
        StandardListView {
            model: [
                {text: "Item 1"},
                {text: "Item 2"},
                {text: "Item 3"},
            ];
        }
        HorizontalBox {
            Button {
                text: "Button 1";
            }
            Button {
                text: "Button 2";
            }
            Button {
                text: "Button 3";
            }
        }
        CheckBox {
            text: "A checkbox";
        }
    }
}

Launch on SlintPad

Platform: KDE, Linux, X11

FloVanGH commented 11 months ago

@FireFragment thank you very much for your report. That's true at the moment a visual focus state for the StandardListView is missing.

FloVanGH commented 11 months ago

Behavior regarding to the design specifications:

Fluent (Windows winui)

On fluent on a focused ListView the first item got a focus border. The border can be moved down by array down and up by arrow down. To change selection you have to press enter on the focused ListView.

Cupertino (macOS)

There is no dedicated visual representation of a focused ListView. Behavior on a focused ListView is arrow down, selects the next item, arrow up selects previous item.

Material (Android)

On material ListView does not have a focus state, instead by press tab the next item in the list is focused. On enter the item got selected.

FloVanGH commented 11 months ago

I would like to implement the fluent focus behavior for all styles to have a common behavior. But I have one problem if the ListView got focus the focus should be set on the first item and the ListView should scroll to it if it is not visible. But for this I need to detect when the ListView got focus, for this I would need something like a on-got-focus event / callback or a property change handler for has-focus #112.