Skip to content

Conversation

@mokshkimta21
Copy link

Summary

Fixes an issue where expanding a .collapse element causes a scroll jump in Firefox due to automatic focus behavior.


Context

  • Issue: #41562
  • Firefox shifts focus to the collapsing element when tabindex="-1" is used, causing the page to scroll unexpectedly.
  • This behavior is specific to Firefox and does not affect Chrome or Safari.

Changes

  • Detects Firefox using the user agent.
  • Prevents focusing the collapse element in Firefox to avoid scroll jumps.
  • Keeps current behavior unchanged for other browsers.

Before & After

Browser Scroll Jump Before Scroll Jump After
Firefox Yes No
Chrome No No
Safari No No

Testing

  • Verified fix on:
    • Firefox 128 (macOS)
    • Chrome 115
    • Safari 17
  • Ran npm run dist to generate updated files.

Checklist

  • Follows Bootstrap's code style and conventions.
  • Only affects Firefox behavior.
  • Fix confirmed on live test.
  • Addresses the root issue (Extended margin and padding #41562).
  • Does not introduce any regressions.

@mokshkimta21 mokshkimta21 requested a review from a team as a code owner August 1, 2025 18:23
@julien-deramond
Copy link
Member

Thanks for creating a PR @mokshkimta21
Quick feedback without having tested the branch so far:

  • The reference of the issue in the description is not the right one. This fix is not linked to Extended margin and padding #41562. Please update the reference in the description.
  • Please don't use emojis in comments.
  • Please don't commit the js/dist files.
  • Please add some unit tests.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants