Conversation
cdolfi
left a comment
cdolfi
left a comment
There was a problem hiding this comment.
Reading through this seems like it should be split into atleast 2 PR: One for color styling changes, one for button change, and one for the Cascading Enter key handler for the search bar.
EngCaioFonseca
moved this from In Progress
to Testing | Waiting on PR response | Blocked
in Aspen Project Board
| var options = document.querySelectorAll( | ||
| ".mantine-MultiSelect-option" | ||
| ); | ||
| if (options.length > 0) { | ||
| // Dropdown has options — let Mantine handle Enter | ||
| // to select the highlighted item | ||
| return; | ||
| } | ||
|
|
||
| // Dropdown is closed — trigger search | ||
| e.preventDefault(); |
There was a problem hiding this comment.
we shouldnt be trying to look into the children to decide what to do in a parent event handler - this is backwards from the natural cascading effect of event handlers.
instead we should allow the menu items to handle their own key events (we already do this somewhere i think since pressing enter on one option already works), and simply e.PreventDefault() after doing that so it doesnt bubble up to the search bar. Then, once the menu is closed, the search bar should be in focus and a subsequent enter will hit this event handler, eliminating the need for this logic and simplifying it down to just calling the search function
| var searchButton = document.getElementById("search-button"); | ||
| if (searchButton) { | ||
| searchButton.click(); | ||
| } |
There was a problem hiding this comment.
Im not a fan of simulating a click on the button - would be better if we could call the actual search function or whatever the next stage of this process is.
github-project-automation
bot
moved this from Testing | Waiting on PR response | Blocked
to Done
in Aspen Project Board
3 participants
This PR adds a few features to improve the Search bar UI/UX based on Issue #1097
Generative AI disclosure
Please select one option:
If AI tools were used, please provide details below:
- What tools were used? Claude Code, Coderabbit
- How were these tools used? Initial draft and Prototype
- Did you review these outputs before submitting this PR? Yes