'Cypress-Vuetify test issue: v-date-picker month buttons keep detaching

I am running Cypress test on the following component:

<v-row>
          <v-col cols="12">
            <v-date-picker
              v-model="calendarDate"
              :allowed-dates="availableReportingMonths"
              :landscape="false"
              :min="earliestReportingDate"
              :max="latestReportingDate"
              :title-date-format="titleDateFormat"
              @change="onReportingDateChanged"
              small
              full-width
              type="month"
              data-cy="dashboard_date_picker"
            />
          </v-col>
</v-row>

Here is the following Cypress test:

it( 'Date Selection Change', () => {
    cy.get( ticketDatePicker ).contains( 'December 2021' );
    cy.get( ticketDatePicker ).contains( '.v-btn', 'Oct' ).parent( 'td' ).click();
    cy.get( ticketDatePicker ).contains( 'Reporting Date: October 2021' );
 });

After this, I get an error message indicating the DOM element is detached: https://imgur.com/a/7vq3trc (image link is posted because of low reputation).

I can get the button, but I cannot click it. I would like to know if this is common or a Vuetify issue stemming from the well documented interaction issues.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source