d-grid with checkbox or radio buttons causes scrolling in Chrome on button click

[xeron]

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

When using checkbox and/or radio buttons inside of a div with d-grid class button clicks cause browser window to scroll up.

Reproducible on desktop in Chrome, but not in Safari and not in iOS Chrome.

I think the reason is because clicking label focuses on the related input, but all inputs are inside of the parent div 0,0 position and not near the label:

.btn-check {
    position: absolute;
}

My current workaround:

.d-grid {
  .btn-check {
    display: none;
  }
}

Reduced test cases

https://codepen.io/iXeron/pen/ExGjvvv

1. Change browser height so not all buttons fit the viewport
2. Scroll to the bottom and click any button close to the bottom
3. Page will scroll up

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

macOS

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

Chrome

What version of Bootstrap are you using?

5.3.1

[xeron]

Just realized it's possible that I might be doing something wrong here.

If d-list is not supposed to be used with "fake buttons" (inputs and labels) feel free to close the ticket.

Effect similar to d-list gap-3 could be achieved by using the following anyway:

<div class="row gy-3">
  <div>
    <input ...
    <label class="btn w-100...

[jamgregory]

We've just experienced the same thing. This appears to be related to the relevant btn-check <input> element being moved below other elements on the page, but then causing the entire page to scroll when the related button is clicked and the <input> is 'in view'.

I found someone else had filed a similar bug with Carbon: carbon-design-system/carbon#9444

Apparently it's expected behaviour in Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=1235323

[nblum-mdmi]

We experienced the same behavior with the btn-check <input> element as well. The solution we came to was adding the following CSS rule:

input.btn-check {
  display: none !important
}

It fixed the issue without breaking anything (or so it seems), but would be nice if bootstrap handled that automatically :)

[vezixig]

@NoahMDMi thank you - this helped with the scrolling problem i just ran into!