Prevent page scroll when opening a multiselect with many items

Created on 14 June 2024, 6 months ago

Updated 28 June 2024, 6 months ago

Problem/Motivation

When a multiselect with many items is opened the viewport may scroll as the focus is transferred to the .multiselect-dropdown__list. This happens if the list contents would land outside the viewport even though the .multiselect-dropdown__scroll is fixed in height.

Proposed resolution

Focus the .multiselect-dropdown__scroll on opening, instead of .multiselect-dropdown__list.

🐛 Bug report

Status

Fixed

Version

1.1

Component

Code

Created by

🇺🇸United States benabaird

Live updates comments and jobs are added and updated live.

Merge Requests

!22Prevent page scroll when opening a multiselect with many items
Merged
🇺🇸United States benabaird
updated 6 months ago

Comments & Activities

Issue created by @benabaird
Merge request !22Focus the .multiselect-dropdown__scroll element on load to prevent page scrolling. → (Merged) created by benabaird
Pipeline finished with Skipped
6 months ago
#198453

Comment 6 months ago →

System Message

benabaird → committed 82b0cf22 on 1.1.x

Issue #3454537: Prevent page scroll when opening a multiselect with many...

Status changed to Fixed 6 months ago1:44am 14 June 2024
Comment 6 months ago →
🇺🇸United States benabaird
Comment 6 months ago →
System Message
Automatically closed - issue fixed for 2 weeks with no activity.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024

Prevent page scroll when opening a multiselect with many items

Problem/Motivation

Proposed resolution

Merge Requests

!22Prevent page scroll when opening a multiselect with many itemsMerged

Comments & Activities

!22Prevent page scroll when opening a multiselect with many items
Merged