79526814

Date: 2025-03-22 01:08:56
Score: 0.5
Natty:
Report link

I have a solution. It is a very hacky solution but works.

The issue is googles pointerdown event listener hides the modal before the click triggers.

You can override the shadow root to make it accessible (it is closed by default).

    const originalAttachShadow = Element.prototype.attachShadow;
    Element.prototype.attachShadow = function (init: ShadowRootInit) {
      if (init.mode === "closed") {
        console.log("Intercepted closed shadow root!");
        (this as any)._shadowRoot = originalAttachShadow.call(this, init);
        return (this as any)._shadowRoot;
      }
      return originalAttachShadow.call(this, init);
    };

Then add a MutationObserver that triggers when children are created. The li's are created on demand so you need to wait for them. You can then override the pointer down and manually do the click.

        var predictions = this.searchBox._shadowRoot.querySelector('.dropdown')

        // Ensure the predictions element exists before proceeding
        if (predictions) {
          // Create a MutationObserver to monitor child additions
          const observer = new MutationObserver((mutationsList) => {
            mutationsList.forEach(mutation => {
              if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                mutation.addedNodes.forEach(node => {
                  if (node.nodeType === 1) { // Make sure the node is an element node
                    //@ts-ignore
                     node.addEventListener('pointerdown', () => {
                      //@ts-ignore
                      node.click()
                     })
                  }
                });
              }
            });
          });

          // Start observing the predictions element for added child elements
          observer.observe(predictions, {
            childList: true,  // Observe added/removed child elements
            subtree: true     // Observe all descendants (not just direct children)
          });

This should allow autocomplete to work in the modal. I also tried modifying the z-index of a bunch of elements and that did not work so you have a better solution be sure to let me know!

Reasons:
  • Blacklisted phrase (1): did not work
  • Long answer (-1):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: Jerome Kessler