sentry
sentry copied to clipboard
fix(search): Keep dropdown open when interacting with it
In order to add more interactive components to the search bar (such as a datepicker), the dropdown needs to stay open while clicking into it.
Previous behavior:
- Dropdown is closed by any of these events:
- Enter
- Escape
- Input blur
- On input blur, the component waits for 200ms, then close the dropdown. If an autocomplete item was selected, the close would be cancelled. Any clicks into the dropdown not on an item causes it to close.
New behavior:
- The dropdown is closed by any of these events:
- Enter
- Escape
- Tab
- pointerup event outside the search component
- Dropdown closes immediately instead of waiting 200ms (feels more responsive)
- The
onBlur
callback is called immediately upon blur - The
onClose
callback was added as a better alternative toonBlur
Changes to dashboard widget components:
Some dashboard widgets were dependent on the blur timeout. Since they used the onBlur
callback, an additional timeout was used to determine whether or not to update the widget. I added an onClose
callback and changed these components to use that instead. I think that this keeps the intended behavior while simplifying the logic quite a bit (please correct me if this is wrong!).
Changes to tests:
Some tests were broken (mostly enzyme ones of course) and needed some slight modifications to get them to pass. I think these tests were too dependent on the implementation details and if rewritten in RTL wouldn't have failed.