Dropdown with initial "show" class and data-bs-auto-close="outside" doesn't close

[MurzNN]

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

I need to render a Bootstrap Dropdown element opened by default with the data-bs-auto-close="outside" attribute. For this, I use the "show" classes for the "dropdown-toggle" and "dropdown-menu" elements.

It renders as opened, but the auto-close feature doesn't work - when I click outside of the dropdown menu, it stays visible on the wepage.

Reduced test cases

Here is a Codepen repoducing this bug: https://codepen.io/MurzNN/pen/ogNVXMY

And the code:

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable outside 1
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

<div class="btn-group">
  <button class="btn btn-secondary dropdown-toggle show" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
    Clickable outside 2
  </button>
  <ul class="dropdown-menu show">
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
    <li><a class="dropdown-item" href="#">Menu item</a></li>
  </ul>
</div>

The problem is with the "Clickable outside 2" button.

P.S. The Positioning of the dropdown menu is wrong too, but this is another bug #41148

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

Windows, Linux

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

Chrome

What version of Bootstrap are you using?

v5.3.4