FlexSearch and BootstrapJavascript Conflict, Preventing Dropdowns

[Tombarr]

Description

If both flexSearch and bootstrapJavascript are enabled, their Bootstrap dependencies conflict with one another and Dropdowns are never shown. Clicking

Steps to reproduce

Enable both flexSearch and bootstrapJavascript

[doks]
  flexSearch = true
  bootstrapJavascript = true

Listen for Bootstrap events: show.bs.dropdown, shown.bs.dropdown, hide.bs.dropdown, and hidden.bs.dropdown

Note that shown is immediately followed by hide, because the click event handler is triggered twice, once from bootstrap.js and once from search-modal.js

Expected result

Clicking on a collapsible menu item should show the dropdown

Actual result

Clicking on a collapsible menu item appears to do nothing (because the show class is immediately removed by the second event handler)

Environment

hugo v0.145.0-666444f0a52132f9fec9f71cf25b441cc6a4f355+extended darwin/arm64 BuildDate=2025-02-26T15:41:25Z VendorInfo=gohugoio
npm: 10.9.0
node: 20.11.0

Note: this behavior is consistent across multiple dependency versions.

package.json

  "dependencies": {
    "@tabler/icons": "^3.30.0",
    "@thulite/doks-core": "^1.8.1",
    "@thulite/images": "^3.3.1",
    "@thulite/inline-svg": "^1.2.0",
    "@thulite/seo": "^2.4.1",
    "thulite": "^2.5.0"
  },
  "devDependencies": {
    "csv-parser": "^3.2.0",
    "prettier": "^3.5.2",
    "vite": "^6.2.0"
  },

[h-enk]

Confirmed. I will pick this up for the upcoming release