-
-
Notifications
You must be signed in to change notification settings - Fork 155
Description
Bug description
Description
When using Tom Select within Bootstrap dropdown menus on pages with horizontal scrollbars, clicking on selected items causes the page to unexpectedly jump to the far left (horizontal scroll position 0). This is particularly disruptive when users are positioned at the far-right of the page and suddenly get sent to the far-left, losing their current context and position. This affects both single-select and multi-select instances and significantly impacts user experience, especially in wide table layouts or dashboard interfaces where horizontal scrolling is necessary.
Expected behavior
Clicking on selected items should either:
Do nothing (for single-select, since the item is already selected)
Remove the item (for multi-select with appropriate UI indication)
Not cause any page scrolling/jumping
Steps to reproduce
Steps to Reproduce
1 - Create a page with horizontal scrolling (wide content that exceeds viewport width)
2 - Create a Tom Select instance inside a Bootstrap dropdown menu:
<div class="dropdown-menu show">
<div class="row px-4 py-3">
<div class="col-12 mb-3">
<select id="example-select" data-placeholder="Select an option">
<option value="" label=" "></option>
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
</select>
</div>
</div>
</div>
3- Initialize Tom Select:
new TomSelect('#example-select', {
closeAfterSelect: true
});
- Scroll horizontally to the far-right of the page
- Click on the selected item ("Option 2" in the rendered Tom Select control)
- Observe that the page immediately jumps horizontally back to position 0 (far-left), completely disrupting the user's workflow
Additional context
Tom Select version: 2.4.3
Browser: Tested on Chrome
CSS Framework: Bootstrap 5.2
Context: Tom Select instances inside Bootstrap dropdown menus