popover navigation not working when over modal

[metter]

I have this weird situation where the popover is on top of an open modal and the arrow key become unelectable. When I click on them it selects the elements in the modal underneath. I have changed the zindex of the popover to 20000. no luck.

The navigation via keyboard works. Just the arrow keys are not selectable.

and idea what i can try?

[elrumordelaluz]

Hi @metter, thanks for open the Issue.

Mind creating a minimal reproduction in a sandbox in order to allow others to debug faster your use-case and try to find a solution as soon as possible? Thanks!

[metter]

Hi @metter, thanks for open the Issue.

Mind creating a minimal reproduction in a sandbox in order to allow others to debug faster your use-case and try to find a solution as soon as possible? Thanks!

I have tried a minimal setup and it actually works fine there. But this minimal setup does not accurately reproduce our specific setup. I am not the lead developer on our app and the way the modal is implemented may be the cause of this issue.

Our modal is opened by a redux change:

<button type="button" className="w-full rounded bg-sky-500 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-sky-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
onClick={()=>
  store.dispatch( //@ts-ignore setModal({ modal: ENUM_MODAL_TYPE.EDIT_CHARACTER,
  data: { mode: "ADD", addCharacterToState: addCharacterToState } }) ) }
  > Add character
</button>

I am not sure I can replicate that in a sandbox.

[elrumordelaluz]

I think is more a css issue, like where you started to look for, and not a Modal launching issue. Is the app somewhere public to debug?

I am supposing all the elements of the Popover (prev, next, close buttons) and the Highlighted part of your app are unaccessible by the Modal mask, right?

Can you share the way you were trying to change z-index of parts of the Tour?

[metter]

I think is more a css issue, like where you started to look for, and not a Modal launching issue. Is the app somewhere public to debug?

I am supposing all the elements of the Popover (prev, next, close buttons) and the Highlighted part of your app are unaccessible by the Modal mask, right?

Can you share the way you were trying to change z-index of parts of the Tour?

Yes the app is public here: app.story-boards.ai. It's in public beta, so you are free to create an account. You will get to the modal if you create a project, then in the app, you add a character in the character tab. At the moment I have skipped the tour steps over the modal because of this issue.

This is how I apply the zindex to the popover:

<TourProvider steps={[]}
      styles={{
        popover: (base) => ({
          ...base,
          '--reactour-accent': '#ef5a3d',
          borderRadius: radius,
          zIndex: 20000
        }),
        maskArea: (base) => ({ 
          ...base, 
          rx: radius }),
        maskWrapper: (base) => ({ 
          ...base, 
          color: '#57697E',
          zIndex: 20000 }),
        controls: (base) => ({ 
          ...base, 
          marginTop: 50 }),
        close: (base) => ({ 
          ...base, 
          right: 8, 
          left: 'auto', 
          top: 8 }),
        arrow: base => ({
          ...base,
          zIndex: 22000
        }),
      }}
      disableInteraction = {true}
      disableFocusLock = {true}
      showBadge= {false}
      showDots= {false}
      scrollSmooth={true}
      beforeClose={() => console.log("Tour finished or closed")}>
        <Provider store={store}>
          <Router>
            <App />
          </Router>
        </Provider>
      </TourProvider>

the modal itself didnt seem to have an zindex applied to it. So I added one for testing. This is the relevant parts of the modal component:

return (
    <>
      <div className={"modal-container w-[1050px] h-[600px]"} style={{ zIndex: 10 }}>
        <div className="mt-3 sm:mt-5">
          <div>
            <div className="flex flex-col gap-4">
              <div className="flex flex-1 flex-row gap-4">
                <input
                  type="text"
                  name="name"
                  id="name"
                  className="block h-[48px] uppercase text-center bg-sky-500 rounded border-0 p-0 text-white focus:ring-0 sm:text-sm sm:leading-6"

...and so on ...

[metter]

@elrumordelaluz I have a react debugger in the browser, that showed the tour component being much further down the component tree than the modal. I found that odd as I would expect that to be almost at the top of the tree as we wrap the app in the tourprovider.

[elrumordelaluz]

I created an account but see introjs as soon as I am in. Then in characters modal (using tailwind) didn't see reactour in order to debug. Is it possible to have the tour working with Modal?

that showed the tour component being much further down the component tree than the modal

Since there are both fixed positioned, this should'n be an issue.

[metter]

I created an account but see introjs as soon as I am in. Then in characters modal (using tailwind) didn't see reactour in order to debug. Is it possible to have the tour working with Modal?

that showed the tour component being much further down the component tree than the modal

Since there are both fixed positioned, this should'n be an issue.

It appears the reactour commit wasn't merged yet. It's still the old intro.js tour. I did another pull request to get the new reactour - tour up. I'll give another shout here when that's merged and up. Thanks for checking.

[metter]

Oh I just realise that this will actually have the tour skip the Modal because of the problem. Let me see if I can send you a developement link

[metter]

@elrumordelaluz Ill have to figure out a way to share a link to a preview deployment with the tour over the modal for you. I'll have to get back to you about that

[metter]

@elrumordelaluz We recently changed the app and created new kinds of modals. The tour works totally fine with those. I wasnt able to replicate the problem anymore. It must have been some oddball thing how we did the previous modal.

[elrumordelaluz]

Cool! If you are able, share some link to test it of a screencast to view it live, thanks!

[metter]

@elrumordelaluz It looks like I was able to replicate the same problem - but this time its not with a modal. The issue seems to be similar though.

you can check it out on the live app at app.story-boards.ai. If you ar ein a project. The app tour should start automatically. If not, you can start it from the help menu.

The problem seems to be from step 4. The selctor is an id inside a component. the component and the elemnts are clearly in the DOM and cn be inspected in the browser. But reactour for some reason does neither recognise the classnames or id's inside this component.

Any idea to why?

[elrumordelaluz]

@metter seems I can't log-in due to invalid credentials, but there's no recover password button. Any way to help me enter into the App?

[metter]

Unfortunately that's a recent issue with our login provider. We are working hard to get this resolved today. Google login seems to be unaffected though, so if you have a Google account that would work. I will get back to you as soon as we have the login issue resolved

[metter]

@elrumordelaluz login is working again

[elrumordelaluz]

In the network response says "Invalid credentials" but there isn't a way to make the forgot passeword process.

[metter]

@elrumordelaluz okay. Our login fix apprently only works for new users. Will have to investigate that.

In the meantime: you can use any email you like. We dont validate them. You can go ahead just creating a new account with any email address as its not validated. Just remember the password, as we are still implementing the password recovery system

[elrumordelaluz]

Ok, created a new account, but can't create a new Project. Following some screenshots:

[metter]

@elrumordelaluz I have a commit ready to address that. Back asap

[elrumordelaluz]

Ok, seems that after some minutes the Project were created. Here is what I see, which step is wrong? can you share the selectors for the steps and confirm if should be a highglighted area in each step?

https://github.com/elrumordelaluz/reactour/assets/784056/8f8a4337-294f-4948-9d19-70525a8725a8

[metter]

export const appSteps: StepType[] = [
    {
    selector: '#timeline',
    content: (
      <div>
        <p>Here's your <strong>Story Timeline</strong>, the canvas where your story unfolds.</p>
        <br/><br/>
        <p>
          Add new Scenes and Shots to build you story.
        </p>
      </div>
    ),
    position: 'center'
  },
  {
    selector: '#timeline',
    content: () => (
      <div>
        <p>Expand <strong>scenes</strong> to see your <strong>shots</strong>. 
        <br/>
        Add descriptions to your shots, that will appear below the image in your storyboard.</p>

      </div>
    ),
    position: 'center',
  },
  {
    selector: '#style-button',
    content: () => (
      <div>
        <p>Give your storyboard a unique flair. Tap <strong>styles</strong> to select a visual style that complements your story's mood.</p>
        <img src={stylesImage} alt="Styles Section" style={{ marginTop: '10px', maxWidth: '100%', height: 'auto' }} />
      </div>
    ),
    position: 'bottom',
    padding: 20
  },
  {
    selector: '#cast-button',
    content: () => (
      <div style={{ fontFamily: "Arial, sans-serif", lineHeight: "1.6" }}>
        <p>Within the <strong>CAST</strong> section, you can create new characters or edit existing ones.<br/><br/> When creating images, remember to use your characters' names in <strong>CAPITAL LETTERS</strong> in the prompt to include them in the image. </p>
        <img src={charactersImage} alt="Cast Section Example" style={{ marginTop: '10px', maxWidth: '100%', height: 'auto' }} />
        <p>This simple yet effective method helps the AI accurately depict the cast members in your story.</p>
      </div>
    ),
    position: 'bottom',
    padding: 20
  },
  {
    selector: '.imagecreator',
    content: () => (
      <div style={{ fontFamily: "Arial, sans-serif", lineHeight: "1.6" }}>
        <h2 style={{ color: "#4A90E2" }}>Image Creation</h2>
        <p>This is the heart of our storyboarding app. Here, you'll create images for each selected shot, bringing your narrative to vivid life.</p>
        <br/><p>To start, select a <strong>shot</strong> in your timeline.</p>

      </div>
    ),
    position: 'center',
    padding: 10
  },
  {
    selector: '#camera-angle',
    content: () => (
      <div>
        <p>Select a camera angle that best suits your image.</p>
      </div>
    ),
    position: 'left'
  },
  {
    selector: "#image-prompt",
    content: (
      <div style={{ fontFamily: "Arial, sans-serif", lineHeight: "1.6" }}>
        <h2 style={{ color: "#4A90E2" }}>Crafting Your Image Prompt</h2>
        <p>Let's make your first AI-generated storyboard image.</p>
        <p>Just type in a description of what you'd like to see, like telling a friend a scene from your story. Use this simple formula for best results:</p>
        <blockquote style={{ margin: "20px 0", padding: "15px", background: "#f9f9f9", borderLeft: "5px solid #4A90E2" }}>
          <strong>WHO</strong> (in CAPITALS), wearing <strong>WHAT</strong>, is doing <strong>WHAT</strong>, <strong>WHERE</strong>.
        </blockquote>
      </div>
    ), position: 'center'
    },
    {
    selector: "#image-prompt",
    content: (
      <div style={{ fontFamily: "Arial, sans-serif", lineHeight: "1.6" }}>
        <p>Here's an example to spark your imagination:</p>
        <blockquote style={{ margin: "20px 0", padding: "15px", background: "#f9f9f9", borderLeft: "5px solid #4A90E2" }}>
        <em>"<strong>JANE</strong>, wearing a spacesuit, is planting a flag on the moon, overlooking Earth."</em></blockquote>
        <p>Feel free to use the names of your characters, and don't worry about getting it perfect on the first try. Give it a shot!</p>
      </div>
    ), position: 'center'
    },
    {
      selector: ".generate-image-button",
      content: (
        <p>Hit <strong>Generate</strong> to bring your scene to life. It may take a moment, but you can keep working on other parts of your story while you wait.</p>
      )
    },
    {
      selector: ".active-image",
      content: (
        <div>
          <p>As your story progresses, you'll accumulate many generated images per shot. <br/><br/>To revisit these visuals, look to the top left corner of the Main Image.</p>
          <p><br/><br/>Click the <strong>Gallery</strong> button to access your previously generated images. </p>
          <img src={galleryImage} alt="Gallery Preview" style={{ marginTop: '10px', maxWidth: '100%', height: 'auto' }} />
        </div>
      ),
      position: 'center'
    },
    {
      selector: "#preview-button",
      content: (
        <p>Get a sneak peek of your storyboard in its current glory on the <strong>Preview Screen</strong>. From here, you can view, print, or share it with anyone.</p>
      )
    },
    {
      selector: "#help-button",
      content: ({ setCurrentStep, setIsOpen }: { setCurrentStep: Function, setIsOpen: Function }) => (
        <div>
          <p>If you ever need to revisit this tour, you can restart it right here. Don't hesitate to refresh your memory!</p>
          <div style={{ display: "flex", justifyContent: "center", marginTop: "10px" }}>
            <button
              onClick={() => {
                setCurrentStep(0);
                setIsOpen(false);
              }}
              style={{
                backgroundColor: "#5c6af3",
                color: "white",
                padding: "10px 15px",
                border: "none",
                borderRadius: "5px",
                cursor: "pointer",
                textAlign: "center"
              }}
            >
              Done
            </button>
          </div>
        </div>
      )
    }
];

pretty much everything from step 4 is not recognised.

pretty much everything from step 4 is not recognised.

I am currently updating the tour anyways as its already out of date. Some of the steps might be dropped this week. So it's more of a general question where to trouble shoot if the element is not recognised by the tour, but visible in the DOM

[elrumordelaluz]

Just making

document.querySelector('.imagecreator')

at the time of step 4, didn't find this element in DOM.

Edit:

I think the selector for step 4 should be #image-creator instead.

[elrumordelaluz]

but you shared this step:

[
// step 4
{
    selector: '.imagecreator',
    content: () => (
      <div style={{ fontFamily: "Arial, sans-serif", lineHeight: "1.6" }}>
        <h2 style={{ color: "#4A90E2" }}>Image Creation</h2>
        <p>This is the heart of our storyboarding app. Here, you'll create images for each selected shot, bringing your narrative to vivid life.</p>
        <br/><p>To start, select a <strong>shot</strong> in your timeline.</p>

      </div>
    ),
    position: 'center',
    padding: 10
  },
]

[elrumordelaluz]

I think the problem is the sm:hidden tailwind classname attached to a parent div.

Removing this classname, I see this, where seems all steps working:

https://github.com/elrumordelaluz/reactour/assets/784056/e98499cf-f169-4d8a-a895-dbb3e111e320

[metter]

yes, sorry, I had changed the selector around trying to get it to work. In my local copy I have selector: '#image-creator' and it doesn't recognise it.

I'll push the next live version with that selector back in place so you can see it

[metter]

I think the problem is the sm:hidden tailwind classname attached to a parent div.

Removing it I see this:

Kapture.2024-02-19.at.08.53.53.mp4

Oh I see. I have this part twice in my code. For mobile and desktop. Let me check it I put the id on the wrong section

[metter]

@elrumordelaluz got it. The way I am doing it, duplicated an entire section in the DOM with one being sm:hidden. But the id's are still both present.

Thank you for pointing this out.

I'll let myself out...

[elrumordelaluz]

cool! can we close this issue?

[metter]

yes. Thank you.