primevue icon indicating copy to clipboard operation
primevue copied to clipboard

TreeSelect: Selection panel detached from input when open on top

Open yannick-bonnefond opened this issue 1 year ago • 0 comments

Describe the bug

When the tree select input is at the bottom of the page, the selection panel open at the top of the input. Expanding/collapsing nodes detach the panel from the input field

https://github.com/primefaces/primevue/assets/90258273/fce3cc44-38f3-4a15-b9e2-0aa60d1cfac7

selection panel is anchored to the input from its top, which works well when opened bellow the input. When open at the top of the input, it should be anchored to the input from its bottom.

Hope it makes sense.

Reproducer

https://stackblitz.com/edit/primevue-create-vue-issue-template-ljr5ol?file=src%2FApp.vue

PrimeVue version

3.52.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

  1. Make sure the input is at the bottom of the page
  2. Click the input to open the panel
  3. select the first root value (2024)
  4. close the panel
  5. Click the input to open the panel
  6. collapse the expanded selected value

Expected behavior

Expected behavior should be similar to the TreeSelect on Ant design for instance. When open at the top of the input, selection panel should be anchored to the input from its bottom.

https://github.com/primefaces/primevue/assets/90258273/04ddb5d6-8d8e-4721-bebf-9a4bf9c1a2a7

yannick-bonnefond avatar May 01 '24 15:05 yannick-bonnefond