Dropdown does not close when clicking outside if opened via toggle button

[augustmarowski]

Description
When the dropdown is opened by clicking the toggle arrow button with data-action="toggle", clicking outside the dropdown does not close it. This happens because the input element does not receive focus when the dropdown is opened in this way, and the component relies on the blur event from the input to close the dropdown.

Steps to reproduce

1. Click the toggle arrow button to open the dropdown.
2. Click anywhere outside the dropdown.
3. Observe that the dropdown does not close.

Expected behavior
Clicking outside the dropdown should close it, regardless of how the dropdown was opened.

Proposed Solution
To fix this issue, omit data-action="toggle" from the toggle arrow button. Without data-action="toggle", the click will trigger focusControl, which ensures the input is focused. This allows the blur event to fire when clicking outside, correctly closing the dropdown.

Additional Context
The issue occurs because data-action="toggle" bypasses the logic in focusControl that focuses the input. This prevents the dropdown from responding to outside clicks via the on_blur handler.

[mskocik]

This behavior is intentional. To be able to toggle dropdown without triggering focus. Especially practical on mobile

[augustmarowski]

Thank you for the quick response and for clarifying that this behavior is intentional.

However, this approach introduces a usability issue:
When the dropdown is opened without focusing the input (via data-action="toggle"), clicking outside does not close the dropdown. This can confuse users and lead to unexpected behavior, as the dropdown remains open until the toggle button is clicked again.

Would it be possible to implement an alternative solution that accommodates both scenarios? For example:

1. Allow the dropdown to close on outside clicks even when opened via data-action="toggle". This could be achieved with a "click-outside" listener or by ensuring the dropdown closes on any interaction outside the component.
2. Provide a clear configuration option to choose whether data-action="toggle" should also focus the input or not, so developers can tailor it to their use case (e.g., desktop vs. mobile).

This would maintain the flexibility of toggling without focus while addressing the dropdown closure issue for users who expect outside clicks to always close it.

[augustmarowski]

Follow-Up - @mskocik
I’ve also noticed two additional issues with the current behavior of data-action="toggle":

1. Pressing Escape does not close the dropdown, as the input is not focused.
2. Multiple dropdowns can be open at the same time, as clicking outside or pressing Escape doesn't close them.

These issues make it harder to manage dropdowns consistently and could confuse users. Addressing these would greatly improve the overall usability.

---

[mskocik]

Okay, when I will have time for it, I will add it (you know time is money).

In the meantime you can use CSS override:

:global(.sv-btn-indicator[data-action="toggle"]) {
  pointer-events: none;
}

[yadoga]

Was just now confused discovering the behavior as well. Thinking the default behavior should close the dropdown when clicking outside. Just to second OP.

In case mobile needs a different behavior it might be possible to control for this separately..