Dropdown component flicks when specific spot is clicked

[krystxf]

Describe the bug Dropdown component flicks when specific spot is clicked. This is now happening only in storybook and not in the app, but it used to be in app as well.

Info:

• Remembered Wallet:
• Suite Version: web
• Browser:
  • Firefox 131.0.3 (aarch64)
  • Google Chrome Version 130.0.6723.59 (Official Build) (arm64)
• Browser Installation Method: homebrew
• OS: macOS Sequoia
• Bridge:
• Firmware Version:

How to reproduce Steps to reproduce the behavior:

1. run packages/components storybook
2. open http://localhost:9003/?path=/story/dropdown--dropdown
3. Click inside red rectangle, but outside of grey circle

Expected behavior Menu content doesn't flic

Screenshots

https://github.com/user-attachments/assets/5470fc67-f31e-41da-b73d-9bd06dc8ea8d

Additional context File with issue

[krystxf]

Cause

This is happening because there are different triggers for blur click and button click

• method checking for blur is triggered by mousedown - (doesn't wait for button to be released)
• method checking for button click is onclick - fires after full click (mouse button is released)

Because of this two state changes are happening almost at the same time and asynchronous state updates causes flicker.

Solutions

1. It is a quick solution, but it doesn't fix the main issue with the button "hitbox" change this onClick to onMouseDown and add onTouchStart as well
2. fix the fundamental issue (more elegant logic, but is more complex) change button "hitbox" so that it doesn't trigger useOnClickOutside