Skip to content

input elements are not interactive inside a spotlight #2901

@artem-malko

Description

@artem-malko

🐛 Bug report

input elements are not interactive inside the spotlight.

💥 Steps to reproduce

I've started with your example.

  1. Go to https://stackblitz.com/edit/y4obepdn?file=src%2FTour.tsx
  2. Click on "Start tour"
  3. Click "Let's go"
  4. Try to click to text input in the spotlight
  5. And it is not interactive, even was initialized like <Tour closeOnInteractOutside={false} preventInteraction={false} />

💻 Link to reproduction

It is an example from the docs: https://stackblitz.com/edit/y4obepdn?file=src%2FTour.tsx

🧐 Expected behavior

The input is interactive inside the spotlight

🧭 Possible Solution

The possible solution for me right now is to remove id from getContentProps(). But I'm really not sure that it is ok.

The possible solution for all users — closeOnInteractOutside={false} preventInteraction={false} options should work)

🌍 System information

Software Version(s)
Zag Version latest
Browser doesn't matter
Operating System doesn't matter

📝 Additional information

Idkw, may be this options (closeOnInteractOutside={false} preventInteraction={false}) are for something else, but it is confusing.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions