[Bug] Viewer Crashes when it's resized and UI has 'disabled' elements

[lorenz-jhager]

WebViewer version
11.8

The current behavior
Viewer crashes when it's resized to a narrow width, and the UI has some elements that are 'disabled' (via disableElements.

See short demonstration video:

chrome_RppRmPUiGN.mp4

The expected behavior
Viewer does not crash

Steps to reproduce
Use disableElements() to hide a UI Element and resize.

I created a minimal reproduction repository: https://github.com/lorenz-jhager/webviewer-ui-issue-reproduction
Use steps provided in README to reproduce the issue.

[bollain]

Hi @lorenz-jhager,

Thanks for taking the time to put together a repo to repro the issue.

I was not able to reproduce, but I made some tweaks to the code that will achieve what you want. The issue is the dividers were missed in the disableElements API, so instead you can just remove them from the items array. I've attached the updated snippet and a video.

Let me know if this works for you.

<script>
    (function initializeWebViewer() {
      // WebViewer configuration
      const webViewerConfig = {
        path: 'lib/webviewer',
        licenseKey: '<LICENSE_KEY>',
        initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
      };

      // Initialize WebViewer
      WebViewer(webViewerConfig, document.getElementById('viewer'))
        .then(setupUI)
        .catch(error => {
          console.error('Error initializing WebViewer:', error);
        });

      function setupUI(instance) {
        // Import modular components configuration
        importModularComponents(instance);

        // Setup dynamic toolbar behavior
        setupDynamicToolbar(instance);
      }

      function importModularComponents(instance) {
        const modularConfig = {
          modularComponents: {
            panToolButton: {
              dataElement: 'panToolButton',
              type: 'toolButton',
              toolName: 'Pan'
            },
            annotationEditToolButton: {
              dataElement: 'annotationEditToolButton',
              type: 'toolButton',
              toolName: 'AnnotationEdit'
            },
            groupedLeftHeaderButtons: {
              dataElement: 'groupedLeftHeaderButtons',
              items: ['panToolButton', 'annotationEditToolButton'],
              type: 'groupedItems',
            }
          },
          modularHeaders: {
            'default-top-header': {
              dataElement: 'default-top-header',
              placement: 'top',
              items: ['groupedLeftHeaderButtons']
            },
          }
        };

        instance.UI.importModularComponents(modularConfig);
      }

      function setupDynamicToolbar(instance) {
        // Create additional UI components
        const firstDivider = new instance.UI.Components.Divider({
          dataElement: 'divider1'
        });

        const secondDivider = new instance.UI.Components.Divider({
          dataElement: 'divider2'
        });

        const rectangleToolButton = new instance.UI.Components.ToolButton({
          dataElement: 'rectangleToolButton',
          toolName: instance.Core.Tools.ToolNames.RECTANGLE
        });

        // Get references to UI components
        const groupedLeftHeaderButtons = instance.UI.getGroupedItems('groupedLeftHeaderButtons');
        const baseToolbarItems = groupedLeftHeaderButtons.items;
        const additionalItems = [firstDivider, rectangleToolButton, secondDivider];

        // Initially show all tools
        groupedLeftHeaderButtons.setItems([...baseToolbarItems, ...additionalItems]);

        // Setup tool mode change listener
        const { documentViewer, DocumentViewer } = instance.Core;

        documentViewer.addEventListener(
          DocumentViewer.Events.TOOL_MODE_UPDATED,
          handleToolModeChange
        );

        function handleToolModeChange(toolMode) {
          if (toolMode.name === 'Pan') {
            // Hide additional tools when Pan tool is active
            groupedLeftHeaderButtons.setItems(baseToolbarItems);
          } else {
            // Show all tools for other modes
            groupedLeftHeaderButtons.setItems([...baseToolbarItems, ...additionalItems]);
          }
        }
      }
    })();
  </script>

Screen.Recording.2025-10-15.at.5.52.54.PM.mov

[lorenz-jhager]

Hi @bollain,

Thanks for your response. I'm aware that you can use the new Modular UI APIs to achieve this, but your code sample is still highly appreciated! We are going to migrate our code to leverage the new APIs.

That said, even if there is a workaround available, I still think the original issues exist:
The crash happens when "The UI has some 'disabled' elements (via disableElements)." It should be easily reproducible in my repo with its original code.

Regarding the divider, it's still not obvious to me why it doesn't work with disableElements. It's created from the same UI.Components namespace and you provide the dataElement in the same way as for other UI Components. However, the others can be handled via disable-/enableElements, but the divider can't. I wouldn't assume that this is expected behavior.
If there are technical or philosophical limitations, it would be helpful if the disable/enableElements API documentation listed them.

[bollain]

@lorenz-jhager I was now able to reproduce the issue with the crash - I see you have a PR with a proposed solution. I will add this to our internal backlog for review, thanks for raising this.

As for the divider, it seems there was an oversight as it was not wired to work with the disableElements API (basically needs to be wrapped in this component). I can also track that in the backlog. For now I would recommend to use the new Modular APIs.

I will update this ticket when the crash issue is resolved, and the disableElement issue can be tracked in your other issue.

We appreciate this report and proposed solution! We will keep you posted.