DataTable Filter with Calendar is not showing in proper location

[sankarseran]

Describe the bug

When I update primeVue from 8.20.0 to 8.23.0. The data table filter with the calendar is not in the proper position.

When I compare the diff in the release ColumnFilter.Vue overlayVisible with the calendar filter now has the v-focustrap="{ autoFocus: true }".

So, the calendar is showing without the below in-line style. z-index: 2104; width: 296px; min-width: 196px; transform-origin: center bottom; top: 68.9062px; left: 322.562px;

Also, I updated my vite version to 4.X.X.

Reproducer

-

PrimeVue version

8.23.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Chrome 109.0.5414.120

Steps to reproduce the behavior

1. open the data table filter with the calendar filter.
2. Calendar will show up on the left top of the page.

Expected behavior

the calendar should show near the calendar input.

[github-actions[bot]]

We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days.

[arnyee]

Hello, I have the same issue, this happens when the Column component I want to filter with calendar has property showFilterMatchModes="false" I try to add more details or try to make an online example, but i can't achive it that now!

And in initFilters my date has only this: date: {value: []}

This is how you reproduce the problem

[arnyee]

https://stackblitz.com/edit/angular-yntcsy?file=src/App.vue

This is an example click to Date filter

[arnyee]

@tugcekucukoglu Can you check my example?

[arnyee]

Can anyone help me with this problem?

[tugcekucukoglu]

According to accessibility improvements, when Calendar input is focused, the overlay panel will be opened. The bug comes that when showFilterMatchModes is false, Calendar input will be focused on that is true but Calendar should not be opened in DataTable filtering. With that fix, adding Calendar's showOnFocus property as false could be used to prevent to opening panel of the Calendar.

[arnyee]

https://stackblitz.com/edit/angular-yntcsy-zjuqxw?file=package.json,src%2FApp.vue

I added your solution to my test example. After the Datatable Date filter opens with the Calendar, now the Calendar overlaypanel not open, but it doesn't open after I click the input, How can I make that possible?

[sankarseran]

@tugcekucukoglu Yeah, I'm facing the same. The calendar is not opening

[arnyee]

@tugcekucukoglu Can you check our problem?

[sankarseran]

it's working fine thanks. https://stackblitz.com/run?file=src%2FApp.vue

[n-skriabin]

@sankarseran your link redirects to https://stackblitz.com. Can you please share your solution? When upgrading to version 3.29.0, solution with showOnFocus stops working. (calendar not opening on click)

[rrnainggolan]

@sankarseran can you share your fix to this issue?

[sankarseran]

@rrnainggolan @n-skriabin , I checked and it's working in the version 3.28.0, not greater than that. this is with version 3.28.0 -> https://stackblitz.com/edit/angular-yntcsy-k7ytqy?file=src%2FApp.vue and it's working. also I believe in the latest (3.28.0 < ) the fix got reverted.

@tugcekucukoglu, @Olguorsbasak could you please reopen and have a look at this issue.

it's reverted in this fix #3923 , so we need to look for a new solution.

[sankarseran]

@rrnainggolan @n-skriabin , I checked and it's working in the version 3.28.0, not greater than that. this is with version 3.28.0 -> https://stackblitz.com/edit/angular-yntcsy-k7ytqy?file=src%2FApp.vue and it's working. also I believe in the latest (3.28.0 < ) the fix got reverted.

@tugcekucukoglu could you please reopen and have a look at this issue.

[mrtdmrmrt]

can you share your fix to this issue? version: 3.29.2

[Joe0x01]

I found a workaround for this.

Keep :showOnFocus="false" but set a ref to the calendar and handle the @click event to open it from there.

<CalendarElement
  ref="cal1"
  @click="$refs.cal1.overlayVisible = true"
  v-model="filterModel.value"
  :manualInput="false"
  selectionMode="range"
  dateFormat="dd.mm.yy"
  placeholder="dd.mm.yyyy"
  :hideOnRangeSelection="true"
  mask="01.01.2024"
  :showOnFocus="false"
/>