Focus Handling#
Certain elements such as TextInput
accept not only input from the mouse/finger but
also key events originating from (virtual) keyboards. In order for an item to receive
these events, it must have the focus. This is visible through the has-focus
(out) property.
You can manually activate the focus on an element by calling focus()
:
import { Button } from "std-widgets.slint";
export component App inherits Window {
VerticalLayout {
alignment: start;
Button {
text: "press me";
clicked => { input.focus(); }
}
input := TextInput {
text: "I am a text input field";
}
}
}
If you have wrapped the TextInput
in a component, then you can forward such a focus activation
using the forward-focus
property to refer to the element that should receive it:
import { Button } from "std-widgets.slint";
component LabeledInput inherits GridLayout {
forward-focus: input;
Row {
Text {
text: "Input Label:";
}
input := TextInput {}
}
}
export component App inherits Window {
GridLayout {
Button {
text: "press me";
clicked => { label.focus(); }
}
label := LabeledInput {
}
}
}
If you use the forward-focus
property on a Window
, then the specified element will receive
the focus the first time the window receives the focus - it becomes the initial focus element.