public inbox for yew-devel@lists.proxmox.com
 help / color / mirror / Atom feed
From: Dominik Csapak <d.csapak@proxmox.com>
To: yew-devel@lists.proxmox.com
Subject: [yew-devel] [PATCH yew-widget-toolkit] improve keyboard navigation with fields in data tables
Date: Tue,  2 Dec 2025 16:57:59 +0100	[thread overview]
Message-ID: <20251202155805.110540-1-d.csapak@proxmox.com> (raw)

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


                 reply	other threads:[~2025-12-02 15:57 UTC|newest]

Thread overview: [no followups] expand[flat|nested]  mbox.gz  Atom feed

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

  Avoid top-posting and favor interleaved quoting:
  https://en.wikipedia.org/wiki/Posting_style#Interleaved_style

* Reply using the --to, --cc, and --in-reply-to
  switches of git-send-email(1):

  git send-email \
    --in-reply-to=20251202155805.110540-1-d.csapak@proxmox.com \
    --to=d.csapak@proxmox.com \
    --cc=yew-devel@lists.proxmox.com \
    /path/to/YOUR_REPLY

  https://kernel.org/pub/software/scm/git/docs/git-send-email.html

* If your mail client supports setting the In-Reply-To header
  via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox
Service provided by Proxmox Server Solutions GmbH | Privacy | Legal