The whole calendar popup is disabled and transparent.

[NaturalDevCR]

Describe the bug I am currently utilizing Quasar v2 along with this particular component for managing datepickers. Everything functioned smoothly until version 8.1.1 of the component. However, all subsequent versions exhibit the following behavior:

As illustrated in the image:

I had to employ a class to adjust the z-index of the element since it appears beneath everything else.

Moreover, there exists a disabled state within the div element, causing the entire popup to become disabled and the background to become semi-transparent, although it is still possible to select a date.

Reverting back to version 8.1.1 restores the expected functionality, as evidenced by the screenshot below:

Below is the current code snippet I am utilizing:

<VueDatePicker
  :clearable="false"
  :enableTimePicker="false"
  input-class-name="text-center dark-light-bg"
  auto-apply
  :dark="commonStore.isDarkMode"
  v-model="selectedStore.mainDate"
  :auto-position="false"
  format="dd/MM/yyyy"
/>

Any insights on this matter would be greatly appreciated.

Thank you in advance.

[0xBiriyani]

Yes @NaturalDevCR , I can also confirm it's same for me. I am using Quasar V2 and vue-datepicker==8.3.2.

[NaturalDevCR]

Yes @NaturalDevCR , I can also confirm it's same for me. I am using Quasar V2 and vue-datepicker==8.3.2.

I've just discovered, thanks to the commit title, that if I pass :teleport="true" to the component, the issue will disappear.

I'm not entirely sure if the existence of a commit implies that this behavior is unexpected. Therefore, I'm keeping the issue open until We receive clarification.

[Jasenkoo]

@NaturalDevCR No need to close the issue, it will be auto-closed on publishing. Looks like Quasar is handling the disabled flag and adding some opacity to it. The flag originated previously from the teleport component, as a main wrapper where it was disabled by default. Now when you are not using teleport, it adds a div wrapper with disabled flag on it