fix: Filter text field in data browser partly looses focus when hitting enter key to apply filter #2992
Conversation
|
🚀 Thanks for opening this pull request! We appreciate your effort in improving the project. Please let us know once your pull request is ready for review. |
📝 WalkthroughWalkthroughAdds focus checks in DataBrowser keyboard handling to skip global shortcuts when an input or textarea has focus, conditioned on disableKeyControls. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Browser as DOM
participant DataBrowser as DataBrowser
participant KB as KeyboardHandler
User->>Browser: Key press
Browser->>DataBrowser: onKeyDown(event)
alt disableKeyControls is true
DataBrowser-->>Browser: return (no handling)
else input/textarea has focus
DataBrowser->>KB: handleKey(event)
KB-->>DataBrowser: detect input/textarea target
DataBrowser-->>Browser: return (skip shortcuts)
else no input focus
DataBrowser->>KB: handleKey(event)
KB-->>DataBrowser: process shortcuts (copy/nav/edit)
DataBrowser-->>Browser: apply action
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) |
mtrezza
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/dashboard/Data/Browser/DataBrowser.react.js (1)
428-437: Add test coverage for the keyboard shortcut guard.The PR description indicates tests are missing. Please add tests to verify:
- Keyboard shortcuts (copy, delete, navigation) are blocked when focus is on INPUT/TEXTAREA
- Keyboard shortcuts work normally when focus is elsewhere
- Text entry in filter inputs is not affected by this change
Would you like me to generate a test suite covering these scenarios?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/dashboard/Data/Browser/DataBrowser.react.js(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Docker linux/amd64
|
|
||
| // 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; | ||
| } |
There was a problem hiding this comment.
🛠️ 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
contenteditableattribute - 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.jsLength 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/BrowserLength 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).
# [7.6.0-alpha.2](7.6.0-alpha.1...7.6.0-alpha.2) (2025-10-04) ### Bug Fixes * Filter text field in data browser partly looses focus when hitting enter key to apply filter ([#2992](#2992)) ([e3085b9](e3085b9))
|
🎉 This change has been released in version 7.6.0-alpha.2 |
New Pull Request Checklist
Issue Description
Filter text field in data browser partly looses focus when hitting enter key to apply filter. The curser stays in the text field, but some keystrokes are applied to the selected data browser cell instead of the text field text.
Approach
Keep focus in text field and apply all key inputs to text field.