p-multiselect: Displaying the multiselect options dialog causes page to horizontally scroll

[rosenthalj]

Describe the bug

In a page that has a horizontal scroll bar and one or more multiselect options have previously been selected, when the multiselect is clicked the page will automatically scrolls.

The first video demonstrates this issue occurs in the PrimeNG v17.x filter row demo
https://primeng.org/table#filter-row (Note: https://primeng.org/table#filter-menu has the same issue)

multiselectScrollIntoViewBad1.mov

The second video demonstrates this issue using a reproducer that I created to isolate the problem.

multiselectScrollIntoViewBad2.mov

This issue is similar to the following issues that have been fixed: #14039 and #13390

The following changes to multiselect.ts will fix the problem:

Environment

windows and macos

Reproducer

https://stackblitz.com/edit/vr5hjz-jtttd7

Angular version

17.x

PrimeNG version

17.3.3

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.1

Browser(s)

safari, chrome, firefox

Steps to reproduce the behavior

1. Run the reproducer: https://stackblitz.com/edit/vr5hjz-jtttd7
2. Click on the multiselect
   -- The multiselect option dialog will display without scrolling (good)
3. Select the "New York" option
4. Close the multiselect options dialog by clicking on the "X"
5. Click on the multiselect
   -- The multiselect option dialog will display and the panel scrolled to the right (bad)

Expected behavior

Step 6 should not cause the panel to scroll