Skip to content

[Bug]: Page jumps to far left when clicking on selected items #958

@rvalladares77

Description

@rvalladares77

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
});

  1. Scroll horizontally to the far-right of the page
  2. Click on the selected item ("Option 2" in the rendered Tom Select control)
  3. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions