Skip to content

fix: Filter text field in data browser partly looses focus when hitting enter key to apply filter #2992

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 4, 2025
Merged

fix: Filter text field in data browser partly looses focus when hitting enter key to apply filter #2992

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/dashboard/Data/Browser/DataBrowser.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,6 +425,17 @@ export default class DataBrowser extends React.Component {
if (this.props.disableKeyControls) {
return;
}

// Check if the event target is an input or textarea
const target = e.target;
const isInputElement = target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA');

// Ignore all keyboard events when focus is on input/textarea elements
// This allows normal text editing behavior in filter inputs
if (isInputElement) {
return;
}
Comment on lines +428 to +437
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major

🧩 Analysis chain

Verify coverage of all interactive input elements.

The focus guard correctly prevents keyboard shortcuts from interfering with INPUT and TEXTAREA elements. However, consider whether the following element types should also bypass shortcuts:

  • <select> dropdowns
  • Elements with contenteditable attribute
  • Other form controls that accept keyboard input

Run this script to check if there are select elements or contenteditable attributes in filter inputs:

🏁 Script executed:

#!/bin/bash
# Description: Find filter input components to verify which element types are used

# Search for filter-related input elements in the Browser components
rg -n --type=js --type=jsx -C3 'filter.*input|input.*filter|contenteditable|<select' src/dashboard/Data/Browser/

# Search for BrowserTable filter implementation
ast-grep --pattern 'filter' src/dashboard/Data/Browser/BrowserTable.react.js

Length of output: 27

🏁 Script executed:

#!/bin/bash
# Refined search for interactive elements in Browser components
rg -n -C3 '<select' src/dashboard/Data/Browser
rg -n -C3 'contentEditable' src/dashboard/Data/Browser
rg -n -C3 'filter' src/dashboard/Data/Browser

Length of output: 62923

Add <select> to the focus guard
The pagination limit dropdown (<select> in BrowserFooter.react.js:70) isn’t excluded by the current INPUT/TEXTAREA check and will still trigger global shortcuts. Update the guard in handleKey to also bypass when target.tagName === 'SELECT'. No contentEditable elements were found; add that in future if needed.

🤖 Prompt for AI Agents 
In src/dashboard/Data/Browser/DataBrowser.react.js around lines 428 to 437, the
keyboard focus guard only checks for INPUT and TEXTAREA elements so the
pagination limit dropdown (<select>) still triggers global shortcuts; update the
isInputElement check to also treat SELECT elements as input by including
target.tagName === 'SELECT' in the condition so handleKey returns early when
focus is on a select (keep existing null/target safety checks).


if (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) {
// Check for text selection FIRST
const selection = window.getSelection();
Expand Down
Loading