feat: Keyboard Enter key can be used to select item in data browser filter dialog field dropdown #2771
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. |
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) |
Uffizzi Ephemeral Environment
|
Uffizzi Ephemeral Environment
|
📝 Walkthrough""" WalkthroughThe changes update the behavior of the autocomplete component and its suggestion list styling. In the autocomplete logic, the Enter key handling is improved for better keyboard accessibility, ensuring that the submission only occurs with a valid user input and that the component state is properly updated after a selection. Additionally, the styling for active and hovered suggestion list items is enhanced with a new background color for clearer visual feedback. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AutocompleteComponent
User->>AutocompleteComponent: Keydown (Enter)
AutocompleteComponent->>AutocompleteComponent: Check if Enter key and input present
alt onSubmit defined and input non-empty
AutocompleteComponent->>AutocompleteComponent: Call onSubmit(userInput)
AutocompleteComponent->>AutocompleteComponent: Update state (active, activeSuggestion, showSuggestions, userInput)
end
Assessment against linked issues
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
npm warn config production Use Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/components/Autocomplete/Autocomplete.react.js(1 hunks)src/components/SuggestionsList/SuggestionsList.scss(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Node 20
- GitHub Check: Docker linux/amd64
🔇 Additional comments (2)
src/components/SuggestionsList/SuggestionsList.scss (1)
27-33: Improved visual feedback for keyboard navigation and hover states.Adding the semi-transparent white background provides better visual feedback when navigating through suggestions with keyboard or mouse, aligning with the accessibility improvements in the autocomplete component.
Note: The
!importantflag is typically discouraged in CSS, but may be necessary here to override conflicting styles. Consider revisiting the specificity hierarchy if time permits.src/components/Autocomplete/Autocomplete.react.js (1)
254-257: Enhanced Enter key handling with better cross-browser compatibility.The condition now checks both
e.keyCode === 13ande.key === 'Enter', which is a good practice for cross-browser support. The validation before submission is also improved, ensuring that:
userInputexists and is not emptythis.props.onSubmitis defined
mtrezza
changed the title
mtrezza
changed the title
mtrezza
changed the title
mtrezza
changed the title
mtrezza
changed the title
Uffizzi Ephemeral Environment
|
mtrezza
changed the title
# [7.2.0-alpha.3](7.2.0-alpha.2...7.2.0-alpha.3) (2025-05-19) ### Features * Keyboard Enter key can be used to select item in data browser filter dialog field dropdown ([#2771](#2771)) ([dc14710](dc14710))
|
🎉 This change has been released in version 7.2.0-alpha.3 |
New Pull Request Checklist
Issue Description
Closes: #2469
Approach
TODOs before merging
Summary by CodeRabbit