Focus automatically moves to the first input field when the Shepherd tooltip is displayed inside the Quasar dialog

Inizia con la riproduzione fornita di Shepherd.Tour e il markup del dialogo Quasar, quindi traccia i punti di ingresso del tooltip e della gestione del focus responsabili dello spostamento del focus dopo l’apertura del dialogo. Riproduci il problema con i campi dell’indirizzo e verifica che il focus rimanga sul campo di input pincode invece di spostarsi sul primo campo di input.

https://github.com/user-attachments/assets/277c233b-3522-4d75-8481-42fa2b48115f

 const tour = new Shepherd.Tour({
    defaultStepOptions: {
      scrollTo: false,
      showCancelLink: true
    }
  });
  tour.addStep({
    id: 'test-button',
    text: 'Click this button to open the address dialog.',
    attachTo: {
      element: '[data-cy="test-button"]',
      on: 'bottom'
    },
    buttons: [
      {
        text: 'Skip',
        action: () => tour.cancel(),
        classes: 'shepherd-button-skip'
      },
      {
        text: 'Next',
        action: () => {
          document
            .querySelector('[data-cy="test-button"]')
            ?.click();

          setTimeout(() => {
            tour.next();
          }, 200);
        }
      }
    ]
  });

  tour.addStep({
    id: 'address-input',
    text: 'Enter your address here.',
    attachTo: {
      element: '[data-cy="address-input"]',
      on: 'bottom'
    },

    beforeShowPromise: () => {
      return new Promise((resolve) => {
        const checkInput = setInterval(() => {
          const input = document.querySelector(
            '[data-cy="address-input"]'
          );

          if (input) {
            clearInterval(checkInput);
            resolve();
          }
        }, 100);
      });
    },

    buttons: [
      {
        text: 'Back',
        action: () => tour.back()
      },
      {
        text: 'Next',
        action: () => tour.next()
      }
    ]
  });

  tour.addStep({
    id: 'address2-input',
    text: 'Enter your address222 here.',
    attachTo: {
      element: '[data-cy="address2-input"]',
      on: 'bottom'
    },

    beforeShowPromise: () => {
      return new Promise((resolve) => {
        const checkInput = setInterval(() => {
          const input = document.querySelector(
            '[data-cy="address2-input"]'
          );

          if (input) {
            clearInterval(checkInput);
            resolve();
          }
        }, 100);
      });
    },

    buttons: [
      {
        text: 'Back',
        action: () => tour.back()
      },
      {
        text: 'Next',
        action: () => tour.next()
      }
    ]
  });

  tour.addStep({
    id: 'pincode-input',
    text: 'Enter your pincode here.',
    attachTo: { element: '[data-cy="pincode-input"]', on: 'bottom' },
    beforeShowPromise: () => {
      return new Promise((resolve) => {
        const checkInput = setInterval(() => {
          const input = document.querySelector('[data-cy="pincode-input"]');
          if (input) {
            input.focus();
            clearInterval(checkInput);
            resolve();
          }
        }, 100);
      });
    },
    buttons: [
      {
        text: 'Back',
        action: () => tour.back()
      },
      {
        text: 'Next',
        action: () => tour.next()
      }
    ]
  });

Quasar dialog code:

<q-dialog v-model="prompt" no-focus
            persistent>
    <q-card data-cy="address-dialog"
            style="min-width: 350px">
      <q-card-section>
        <div class="text-h6">Your address</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        <q-input data-cy="address-input"
                 dense
                 v-model="address" />
        <q-input data-cy="address2-input"
                 dense
                 v-model="address2" />
        <q-input data-cy="pincode-input"
                 dense
                 v-model="pincode" />
      </q-card-section>

      <q-card-actions align="right" class="text-primary">
        <q-btn data-cy="address-cancel"
               flat
               label="Cancel"
               v-close-popup />

        <q-btn data-cy="address-add"
               flat
               label="Add address"
               v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>

The Pincode input is initially focused when the Shepherd tooltip is displayed, but the focus is then automatically moved to the first input field.