sentry icon indicating copy to clipboard operation
sentry copied to clipboard

fix(search): Keep dropdown open when interacting with it

Open malwilley opened this issue 2 years ago • 0 comments

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 to onBlur

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.

malwilley avatar Jul 27 '22 18:07 malwilley