Interactive steps

With advanceOn, a step finishes when the real event fires on its target. The cutout passes real clicks and keys through; nothing is simulated.

advanceOn and interactive

const steps: SpotlightStep[] = [
  {
    id: 'add',
    target: '[data-tour="add-item"]',
    title: 'Add your first item',
    content: 'Click the real button to continue.',
    advanceOn: { event: 'click' }
  },
  {
    id: 'name',
    target: '[data-tour="name-field"]',
    title: 'Name it',
    content: 'Type a name and press Enter.',
    advanceOn: { event: 'keydown', selector: 'input' }
  },
  {
    id: 'free',
    target: '[data-tour="playground"]',
    title: 'Try anything',
    content: 'interactive: true lets input through without advancing.',
    interactive: true
  }
];