Uncaught RangeError: Maximum call stack size exceeded

[ErriourMe]

I have an error with Bootstrap Vue and viewer. I have modal and several elements inside with viewer on each element.

When viewer opened, it tries to focus:

if (target !== document && target !== viewer && !viewer.contains(target) // Avoid conflicts with other modals (#474)
&& (target.getAttribute('tabindex') === null || target.getAttribute('aria-modal') !== 'true')) {
  viewer.focus();
}

But Bootstrap trying to do something with own modal:

attemptFocus(content, {
  preventScroll: true
});

In the end, it turns out to be an endless loop.

How to fix it?

[mirari]

Maybe you can try api mode. This will prevent the viewer's data source from interacting with the data source you are using for the page presentation. https://github.com/mirari/v-viewer#usage-of-api

[VincEnterprise]

Maybe you can try api mode. This will prevent the viewer's data source from interacting with the data source you are using for the page presentation. https://github.com/mirari/v-viewer#usage-of-api

I've tried using it in API mode yet I still get the same error (max callstack exceeded). Do you have another solution I can try?

[mirari]

Please provide an online code example, please refer to this: https://codepen.io/mirari/pen/NWpwVdd or https://codesandbox.io/s/v-viewer-api-nxh1g

[mirari]

Maybe you can try turning off the viewer's focus option first, which is a feature added by viewerjs in the new version and maybe not stable enough.

[ghost]

Fixed

[GHJayce]

I used bootstrap Vue before. Until I changed to another one Modal of UI framework. The problem is solved.

Using the API mode and the focus option, the stack overflow is solved, but clicking the image again can not arouse the preview component.