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!