[yew-devel] [PATCH yew-widget-toolkit] improve keyboard navigation with fields in data tables

[Lukas Wagner]

On Tue Dec 2, 2025 at 4:57 PM CET, Dominik Csapak wrote:
> when inside an input field in a data table, the intention was to focus
> the next cell when pressing tab. This currently does not work correctly,
> since 'cell_focus_next' tries to focus the next element next to the
> already focused one, and that is not the cell itself but the field
> inside.
>
> Instead of trying to fix that, simply let the browser handle the focus
> handling. This has the advantage that in table with multiple fields
> (like we have in the PDM node list for remotes) we directly focus the
> next input field instead of the next cell (which would need another
> press of 'tab' to focus the input field).
>
> The downside is that to focus the next cell (if it does not contain an
> input), one has to "go out" of the field by pressing F2 and then
> pressing tab.
>
> Since in a data table with fields it is often more useful to navigate
> between those instead of the table cells, i opted for this solution.
>
> In addition, add a tabindex of '0' to the triggers, so they'll always be
> able to be focused.
>
> Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
> ---
>  src/widget/data_table/data_table.rs | 5 +----
>  src/widget/trigger.rs               | 2 +-
>  2 files changed, 2 insertions(+), 5 deletions(-)
>
> diff --git a/src/widget/data_table/data_table.rs b/src/widget/data_table/data_table.rs
> index 7805340..8a68e8c 100644
> --- a/src/widget/data_table/data_table.rs
> +++ b/src/widget/data_table/data_table.rs
> @@ -1220,10 +1220,7 @@ impl<S: DataStore + 'static> Component for PwtDataTable<S> {
>                                  event.prevent_default();
>                                  self.cell_focus_next(&record_key, true);
>                              }
> -                            "Tab" if inside_input => {
> -                                event.prevent_default();
> -                                self.cell_focus_next(&record_key, !shift);
> -                            }
> +                            "Tab" if inside_input => {}
>                              " " if !inside_input => {
>                                  // avoid scrollbar default action
>                                  event.prevent_default();
> diff --git a/src/widget/trigger.rs b/src/widget/trigger.rs
> index be8d8fb..a5d19cf 100644
> --- a/src/widget/trigger.rs
> +++ b/src/widget/trigger.rs
> @@ -68,7 +68,7 @@ impl Component for PwtTrigger {
>              None,
>          );
>  
> -        Tooltip::new(icon).tip(props.tip).into()
> +        Tooltip::new(icon).tabindex(0).tip(props.tip).into()
>      }
>  }
>  

Seems to work as expected:

Tested-by: Lukas Wagner <l.wagner at proxmox.com>