Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #35199
Closed
Open
Issue created Oct 14, 2021 by Administrator@rootContributor3 of 3 checklist items completed3/3 checklist items

Bootstrap 5 Dropdown: Window.getComputedStyle: Argument 1 is not an object.

Created by: chilled-capybara

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

Despite the dropdown-menu class and the data-bs-toggle="dropdown" property, unlike Bootstrap 4, there is currently no flexibility in the order in which the dropdown menu and trigger button should be used within the dropdown wrapper.

From the docs;

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;.

I've added two tests cases, one for button-then-menu and one menu-then-button;

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
    aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
  </ul>
</div>
<div class="dropdown">
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
  </ul>
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
    aria-expanded="false">
    Dropdown button
  </button>
</div>

If the button is the second element, it will throw;

Uncaught TypeError: Window.getComputedStyle: Argument 1 is not an object.

Whilst there is a way to avoid the error (by changing the order), I'm not sure whether there should be the adaptability that was present in Bootstrap 4?

Reduced test cases

Working example (button then dropdown); https://codepen.io/chilled-capybara/pen/rNzOjrJ

Example with error (dropdown then button); https://codepen.io/chilled-capybara/pen/ExvVZep

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

Linux

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

Firefox

What version of Bootstrap are you using?

v5.1.3

Assignee
Assign to
Time tracking