feature: use keyboard for filter 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
|
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
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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
|
|
||
| this.setState({ | ||
| active: true, | ||
| activeSuggestion: 0, | ||
| showSuggestions: false, | ||
| userInput: filteredSuggestions[activeSuggestion], | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Potential edge case with undefined userInput.
When setting userInput: filteredSuggestions[activeSuggestion], there's a risk of setting userInput to undefined if filteredSuggestions is empty or activeSuggestion is out of bounds.
Consider adding a fallback to preserve the current input when there's no valid suggestion:
this.setState({
active: true,
activeSuggestion: 0,
showSuggestions: false,
- userInput: filteredSuggestions[activeSuggestion],
+ userInput: filteredSuggestions[activeSuggestion] || userInput,
});Committable suggestion skipped: line range outside the PR's diff.
New Pull Request Checklist
Issue Description
Closes: #2469
Approach
TODOs before merging
Summary by CodeRabbit