Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MultiSelect: Causes horizontal scroll to align with multiselect option panel when opening panel when an item is selected #2855

Closed
sleepybjr opened this issue May 8, 2022 · 1 comment · Fixed by #2858
Assignees
Labels
Type: Bug Issue contains a defect related to a specific component.
Milestone

Comments

@sleepybjr
Copy link

Describe the bug

When using horizontal scrolling on a page, opening the multiselect panel causes your app to scroll to the right to the start of the panel.

The line that makes this occur is:

highlightItem.scrollIntoView({ block: 'nearest', inline: 'start' });

Changing inline option to nearest would not cause a scroll on the horizontal axis when opening the panel. Unless there is a reason why it uses start that I am unsure about.
highlightItem.scrollIntoView({ block: 'nearest', inline: nearest' });

Reproducer

No response

PrimeReact version

8.0.1

React version

18.x

Language

ALL

Build / Runtime

Next.js

Browser(s)

No response

Steps to reproduce the behavior

  1. Allow overflow-x on your web app.
  2. Overflow it so horizontal scroll bar is shown.
  3. Open MultiSelect dropdown and select an item.
  4. Close and reopen MultiSelect dropdown.
  5. Observe that the entire page shifts to the right to align with the left of the MultiSelect panel.

Expected behavior

Page should not shift horizontally unless the panel is out of view.

@sleepybjr sleepybjr added the Type: Bug Issue contains a defect related to a specific component. label May 8, 2022
@melloware melloware self-assigned this May 8, 2022
@melloware melloware added this to the 8.1.0 milestone May 8, 2022
@melloware
Copy link
Member

Excellent report. I will take a look

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a defect related to a specific component.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants