Dropdown with initial "show" does not seems to correctly place the dropdown if you are using some of the positioning classes

[oleoj]

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 related to the dropdown. If I use the class "show" on load the aligning is not working correctly with the example below.
The problem is the class "dropdown-menu-end". It does not seems to work correctly. When I close it and open it again it is it displayed correctly. Most of the code is taken from your examples.

Reduced test cases

<div class="row">
<div class="col-6"> </div>
<div class="col-6">
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside"> Dropdown form </button>
<div class="dropdown-menu dropdown-menu-end p-4 show">
<div class="mb-3">
<label for="exampleDropdownFormEmail2" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com">
<div class="mb-3">
<label for="exampleDropdownFormPassword2" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
<div class="mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2"> Remember me </label>
</div> </div>
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</div>
</div>

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

Windows

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

Chrome, Microsoft Edge

What version of Bootstrap are you using?

5.3.3

Tasks

Preview Give feedback

No tasks being tracked yet.

[MohamadSalman11]

🛠️ Issue
Adding the .show class to the dropdown menu makes it visible, but it doesn't position correctly.

⚡ Why It Happens
Bootstrap uses JavaScript to position the dropdown, but this only happens when you click the button. So, if you add the .show class manually, the positioning code doesn't run.

📍 What Happens if You Only Add the .show Class
The menu will be visible, but it won't be placed correctly on the screen because the positioning code doesn't trigger.

🚫 Current Bootstrap Support
I think Bootstrap currently does not support the feature where you can add just the .show class, and it will handle the positioning and visibility correctly. The only solution that comes to my mind is to use the show() method on page load to ensure the dropdown is positioned and shown correctly.

If You're Interested in the Code That Does Not Run:
/js/src/dropdown.js

 show() {
    if (isDisabled(this._element) || this._isShown()) {
      return
    }

    const relatedTarget = {
      relatedTarget: this._element
    }

    const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, relatedTarget)

    if (showEvent.defaultPrevented) {
      return
    }

    this._createPopper()

    // If this is a touch-enabled device we add extra
    // empty mouseover listeners to the body's immediate children;
    // only needed because of broken event delegation on iOS
    // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
    if ('ontouchstart' in document.documentElement && !this._parent.closest(SELECTOR_NAVBAR_NAV)) {
      for (const element of [].concat(...document.body.children)) {
        EventHandler.on(element, 'mouseover', noop)
      }
    }

    this._element.focus()
    this._element.setAttribute('aria-expanded', true)

    this._menu.classList.add(CLASS_NAME_SHOW)
    this._element.classList.add(CLASS_NAME_SHOW)
    EventHandler.trigger(this._element, EVENT_SHOWN, relatedTarget)
  }