search

elrumordelaluz / reactour

Tourist Guide into your React Components
https://react.tours
MIT License
3.84k stars 350 forks source link

Maximum Call stack when using with MaterialUI Dialog #469

Closed fawwaz closed 2 years ago

fawwaz commented 2 years ago

Describe the bug I need to highlight the material UI dialog, but as soon as I the MUI dialog opened and I click an element inside MUI Dialog, an error appear in the console saying Maximum call stack size exceeded. making it unusable.

To Reproduce

  1. Open this codesandbox : https://codesandbox.io/s/cocky-heyrovsky-8ys6q1
  2. Click start tour button
  3. Click the button to trigger the modal, a popover from tour component will appear.
  4. Click any part inside MUI Dialog

Expected behavior No error message in the console, browser won't crash

Screenshots See this video recording

https://user-images.githubusercontent.com/1295143/165016934-8eb45383-8801-42a6-a880-95316da91302.mp4

Desktop (please complete the following information):

Additional context Side questions, things that I am not sure :

  1. Am I using the react tour properly ? My needs is to highlight a modal, but the content of the modal is fetched from server (async).
  2. If it is not correct, what is the best way to fulfill my need ?
elrumordelaluz commented 2 years ago

Hi @fawwaz, thanks for open the Issue.

Seems that there is some conflict between the TrapFocus MUI component and the one inside the Tour.

Try adding disableFocusLock like:

<TourProvider steps={steps} disableFocusLock>
  <Main />
</TourProvider>

Here is a working example

elrumordelaluz commented 2 years ago

Due to inactivity I am closing this issue, but feel free to re-open or create a new one in any case.