Inconsistent accessibility behavior within the auto-close behavior of dropdowns

[Necxes]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Hi,

I found inconsistent accessibility behavior within the auto-close behavior of dropdowns when trying to navigate through it with the tab key.

When choosing data-bs-auto-close="true" and data-bs-auto-close="outside" and using the tap key to navigate the dropdowns, it closes once it loses focus.

But when choosing data-bs-auto-close="false" and data-bs-auto-close="inside" the dropdown stays open, even though the focus is on the next item.

I've added a screen recording of the issue:
https://jam.dev/c/dff4dcbf-9535-465c-84ec-40f835c13a10

Reduced test cases

The issue is appearing in the bootstrap documentation:
https://getbootstrap.com/docs/5.2/components/dropdowns/#auto-close-behavior

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.2.1

[MohamadSalman11]

Hi Patrick @Necxes ,

You’re right that with data-bs-auto-close="false" (Manual close) and data-bs-auto-close="inside" (Clickable outside), the dropdown doesn’t close when it loses focus. But with data-bs-auto-close="true" (Default dropdown) and data-bs-auto-close="outside" (Clickable inside), the dropdown does close when it loses focus.

However, e.g. data-bs-auto-close="inside (Clickable outside), the dropdown stays open if you click the next item or use the Tab key to select the next item. I don’t think this is a problem with the Tab key; it’s just how the dropwdowns here work. Using the Tab key to focus on another element is the same as clicking that new element and in both cases, they have the same result: the dropdown does not close.

Nice catch! 😊

[julien-deramond]

Unless I’m overlooking something, the keyboard navigation behaves similarly to the mouse navigation:

Auto close behavior	Mouse	Keyboard
Default dropdown	- Clicking on a menu item closes the dropdown. - Clicking outside closes the dropdown.	- Pressing 'Enter' on a menu item closes the dropdown. - Pressing 'Tab' on the last menu item closes the dropdown when focusing on another element.
Clickable outside	- Clicking on a menu item closes the dropdown. - Clicking outside does not close the dropdown.	- Pressing 'Enter' on a menu item closes the dropdown. - Pressing 'Tab' on the last menu item does not close the dropdown when focusing on another element.
Clickable inside	- Clicking on a menu item does not close the dropdown. - Clicking outside closes the dropdown.	- Pressing 'Enter' on a menu item does not close the dropdown. - Pressing 'Tab' on the last menu item closes the dropdown when focusing on another element.
Manual close	- Clicking on a menu item does not close the dropdown. - Clicking outside does not close the dropdown. - Only clicking on the dropdown button closes the dropdown menu.	- Pressing 'Enter' on a menu item does not close the dropdown. - Pressing 'Tab' on the last menu item does not close the dropdown when focusing on another element. - Only pressing 'Enter' on the dropdown button closes the dropdown menu

I'm going to close this issue for now. If I've missed anything, please let me know, and I’ll reopen it :)

[Necxes]

Hey @MohamadSalman11 and @julien-deramond. If it's intended I am fine! Thanks for taking the time to answer - really appreciate it :)