ESC key in DropDown no longer sets focus back to the toggle button in 5.1x

Created by: mtavares628

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

This is a regression from v5.02 which correctly sets the focus back

To reproduce:

• go to https://getbootstrap.com/docs/5.1/components/dropdowns/
• open a dropdown
• use cursor/arrow keys or TAB to get focus into the menu
• press ESC

Expected:

• the dropdown is closed and focus is reset to the dropdown trigger button

Actual:

• the dropdown is closed, but focus is lost. This creates an accessibility issue for keyboard users.

This is a regression from v5.02, where this worked correctly (see https://getbootstrap.com/docs/5.0/components/dropdowns/)

In looking at the code for dropdown.js in both, it looks like the dataApiKeydownHandler was revamped. v5.02 has the following:

` const getToggleButton = () => this.matches(SELECTOR_DATA_TOGGLE$3) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE$3)[0];

  if (event.key === ESCAPE_KEY$2) {
    getToggleButton().focus();
    Dropdown.clearMenus();
    return;
  }`

v5.1.3 has this instead where the focus is not specifically set:

` const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE$3) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE$3)[0]; const instance = Dropdown.getOrCreateInstance(getToggleButton);

  if (event.key === ESCAPE_KEY$2) {
    instance.hide();
    return;
  }`

Reduced test cases

Here is a CodePen highlighting the issue:

https://codepen.io/mtavares628/pen/LYzZxQM

Following steps of opening dropdown, navigating with the arrow keys and hitting escape doesn't set the focus back to the button.

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

Windows

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

Chrome, Firefox, Microsoft Edge

What version of Bootstrap are you using?

v5.1.3