search

usablica / intro.js

Lightweight, user-friendly onboarding tour library
http://introjs.com
Other
22.8k stars 2.59k forks source link

Intro.js highlight not working in material ui dialog #1134

Closed nlafleur closed 3 years ago

nlafleur commented 3 years ago

Description

div is not highlighted inside material ui dialog, the stepper does point to the correct div.

Expected Behavior

I made the following image in photoshop; image

Actual Behavior

image

For some reason the div with the class 'step2' is not highlighted. I tried to give the parent an higher z-index, this brings the dialog to the front but "highlights" the whole dialog and makes the backdrop useless, when u click next to the dialog it closes the dialog instead of firing the intro.js his backdropclick function. (like: image)

after the backdrop click; image

image

Environment

Browser: Google Chrome, "@material-ui/core": "^4.11.0", "intro.js": "3.2.1", "intro.js-react": "^0.2.0", "react": "^16.12.0",

afshinm commented 3 years ago

Intro.js cannot listen/close the modal when the popup is closed. This is your responsibility to close the Intro.js (using the exit() function) once the modal is closed.

Also, try to use the introjs.refresh() button once your popup is fully rendered: https://introjs.com/docs/hints/api#introjsrefresh -- this function forces Intro.js to find the target css selectors again and re-render the helpers.