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

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

[Dominik Csapak]

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@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()
     }
 }
 
-- 
2.47.3



_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel

Re: [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@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@proxmox.com>


_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel