Prevent multiselect/dropdown box from closing on page scroll

kslb30 commented 9 months ago

Describe the bug

When using the multiselect or dropdown component, when you open the select box and scroll vertically on the page, the select box closes automatically, and there's no way to keep it open. The most frustrating part is that in the documentation, the select box remain open even if you scroll on the page, but in practice, it's impossible to keep them open...

Reproducer

https://c3tk48.sse.codesandbox.io/

PrimeReact version

10.3.1

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

Go https://c3tk48.sse.codesandbox.io/
Open the select box
Reduce the window and display the console to have a vertical scroll
Scroll on the page will close automatically the select box

Expected behavior

Do not close automatically the select box when scrolling on the page or add an option to manage it (Dropdown and MultiSelect components)

melloware commented 9 months ago

It works fine try mine: https://stackblitz.com/edit/rhacf7?file=src%2FApp.tsx,src%2Findex.css

Key is your body CSS has to overflow:

body {
  margin: 0px;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--surface-ground);
  font-weight: normal;
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ScrKiddie commented 2 months ago

It works fine try mine: https://stackblitz.com/edit/rhacf7?file=src%2FApp.tsx,src%2Findex.css

Key is your body CSS has to overflow:
body {
  margin: 0px;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--surface-ground);
  font-weight: normal;
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

It's working perfectly when the dropdown is outside the dialog. How can I fix the dropdown inside the dialog without setting the dialog height to 100%?

melloware commented 2 months ago

Inside the dialog you need to use the appendTo property: https://primereact.org/dropdown/#api.Dropdown.props.appendTo

antman888 commented 1 month ago

Inside the dialog you need to use the appendTo property: https://primereact.org/dropdown/#api.Dropdown.props.appendTo

What should it be appended to? Here's an example in a dialog with a TreeSelect that closes the menu on scroll: https://stackblitz.com/edit/rhacf7-qrr9xf?file=src%2FApp.tsx

primefaces / primereact