If you’re searching “dropdown click not working,” you’re not looking for theory. You’ve got a menu that won’t open, won’t select, or opens then immediately closes. This guide gives you a failure-mode workflow that reduces MTTR by isolating whether the issue is event handling, state toggling, visibility/layering, or framework lifecycle.
Quick takeaway
A dropdown click usually fails for one of four reasons: the click never reaches your handler, the component toggles state but can’t render, the menu opens but is hidden by CSS or overlays, or your framework re-render/hydration breaks initialization. Use a failure-mode workflow and validate fixes with replays and error traces to cut MTTR.
On this page
- What “dropdown click not working” actually means
- Key definitions
- A failure-mode workflow to debug dropdown clicks
- Failure mode 1: Click never reaches your dropdown
- Failure mode 2: Click fires, state never toggles
- Failure mode 3: State toggles, menu hidden
- Failure mode 4: Lifecycle and initialization
- Failure mode 5: Mobile and automation
- Common follow-up questions
- Related answers
What “dropdown click not working” actually means in the wild
Most dropdown failures fall into one of these symptoms: dead click, state toggles but menu is invisible, opens then instantly closes, works in static HTML but breaks in app, or works manually but fails in automation. If you can name the symptom, you can usually cut the search space before touching code.
Key definitions
- FullSession: FullSession is a behavior analytics platform that combines session replay, heatmaps, conversion funnels, user feedback, and error tracking in a single tool. Built for product, growth, and engineering teams at SaaS, ecommerce, and regulated organizations, FullSession helps teams see where users struggle, identify what to fix, and validate the impact of changes.
- Session Replay: Session replay records and plays back real user sessions so teams can see exactly what users did (clicks, scrolls, hesitation, rage clicks, and errors) in the context of their actual journey. It turns abstract analytics data into visible, shareable evidence of user friction that teams can act on.
- Errors & Alerts: Errors and alerts detect JavaScript errors, network failures, and console issues as users encounter them, then link each error to the session replay where it occurred. This lets engineering and QA teams see the exact user impact of every error: not just that it happened, but what the user experienced.
- Pointer-events: pointer-events is a CSS property that can determine whether an element can become the target of pointer interactions, which means an invisible overlay can swallow clicks without looking “broken.”
- Popper: Popper is the positioning library Bootstrap uses for dropdown placement; missing or misordered Popper is a common “click does nothing” root cause in Bootstrap setups.
A failure-mode workflow to debug dropdown clicks (reduce MTTR)
Use this workflow in order. Each step has a fast check and a likely fix.
- Confirm the click reaches the element
Fast checks: in DevTools, attach a temporary listener (click, pointerdown) and see if it fires; inspect whether another element is on top of the trigger. If it never fires, you’re in event-capture land. - Confirm state changes on interaction
Fast checks: does aria-expanded, a show/open/active class, or your component state toggle? If state never changes but the click fires, the handler isn’t running or it’s returning early. - Confirm the menu is actually visible and above the page
Fast checks: inspect the menu node. Is it display:none, visibility:hidden, opacity:0, clipped by overflow:hidden, or behind a stacking context? If state changes but you can’t see it, this is nearly always CSS. - Confirm initialization and lifecycle behavior
Fast checks: does the dropdown work on first load but not after route change? Does it fail only when HTML is rendered dynamically? If yes, you’re likely missing initialization, binding, or you’re fighting hydration timing. - Confirm environment-specific differences (mobile and automation)
Fast checks: does it fail only on mobile (touch), only inside a collapsed nav, or only in Playwright/Selenium? If yes, it’s usually click target, timing, or focus/outside-click logic, not core dropdown code.
Mid-body links: use FullSession Errors & Alerts and the Engineering & QA solution workflow to validate the failure mode against real sessions.
Failure mode 1: The click never reaches your dropdown
This is where invisible overlays, pointer-event rules, and event interception live. If the listener never fires, inspect overlays and propagation. If an overlay is swallowing clicks, pointer-events can be part of the diagnosis.
If this is happening in production, validate with FullSession Session Replay to see dead clicks and repeated attempts.
Failure mode 2: The click fires, but state never toggles
If the click fires but state never changes, your handler is not running (or returns early). Breakpoint inside the handler, compare target vs currentTarget, and confirm delegated selectors still match after markup changes.
Failure mode 3: State toggles, but the menu is hidden
If aria-expanded is true (or your “open” class appears) but nothing shows, it’s usually CSS: display/opacity/visibility, overflow clipping, or z-index/stacking context. Force display and opacity in DevTools to confirm it can render, then fix the real constraint.
Failure mode 4: Framework lifecycle and initialization issues (SPA/hydration)
If it works in static HTML but breaks after navigation, treat it as lifecycle. In Bootstrap setups, dropdown docs note Popper is required for dropdown positioning and should be included before Bootstrap JS, or included via the bundle that contains Popper.
Late links: keep your playbook anchored on FullSession Errors & Alerts and the Engineering & QA solution pages for repeatable incident response.
Failure mode 5: Mobile nav and test automation edge cases
Mobile failures often come from overlays and nav-collapse logic. Automation failures often come from timing, stale nodes, or clicking the wrong target. Match the real tap target and wait for the trigger to be visible and stable.
Common follow-up questions
Why does my Bootstrap dropdown click do nothing?
Most often it’s dependency order or a missing Popper build. Bootstrap dropdown docs note Popper is required for dropdown positioning, and recommend including Popper before Bootstrap JS, or using the Bootstrap bundle that includes Popper.
My dropdown opens but I can’t see it, what should I check first?
Look for display:none, opacity:0, visibility:hidden, clipping from overflow:hidden, and z-index/stacking context issues. If state toggles but it’s invisible, it’s usually CSS.
Can pointer-events break a dropdown click?
Yes. If an overlay or container has pointer-event rules that make the trigger non-targetable, clicks can appear dead even though the UI looks fine.
Why does my dropdown open then immediately close?
Outside-click logic or propagation is common. A parent listener can interpret the same click as an outside click, or a blur/focus change can trigger close.
Why does it work in static HTML but not in my SPA?
Dynamic insertion, re-rendering, or hydration can replace nodes and lose listeners, or plugin initialization may only run on first load. Treat it as lifecycle and confirm init happens after render.
Why does it fail only on mobile?
Touch timing and layout differences can expose overlay and nav-collapse conflicts. Reproduce on a real device, then check overlays and focus/outside-click behavior.
Why does Playwright/Selenium click fail but manual click works?
Automation can click a container, a stale node, or a covered element. Make sure the trigger is visible, stable, and the click target is the same element a user taps.
Related answers
- Explore FullSession Errors & Alerts for error-to-session debugging
- See FullSession Session Replay for dead click and rage click validation
- Use FullSession Heatmaps to confirm interaction patterns at scale
- Instrument drop-off with FullSession Funnels & Conversions
- For team workflows, start at the Engineering & QA solution
Next steps
Pick one failing page and classify the symptom. Run the 5-step workflow, stop as soon as you isolate the failure mode. If the bug is production-impacting, validate the fix using Engineering & QA solution and FullSession Errors & Alerts.
See the workflow on your own UI
If you want to see this workflow on your own UI, you can book a demo or start a free trial and instrument the one journey where this dropdown matters most.
Roman Mohren is CEO of FullSession, a privacy-first UX analytics platform offering session replay, interactive heatmaps, conversion funnels, error insights, and in-app feedback. He directly leads Product, Sales, and Customer Success, owning the full customer journey from first touch to long-term outcomes. With 25+ years in B2B SaaS, spanning venture- and PE-backed startups, public software companies, and his own ventures, Roman has built and scaled revenue teams, designed go-to-market systems, and led organizations through every growth stage from first dollar to eight-figure ARR. He writes from hands-on operator experience about UX diagnosis, conversion optimization, user onboarding, and turning behavioral data into measurable business impact.