Since the search buttons don't have a "type" attribute, it will submit any form the grid is a child of
I have to hack a listener to add the attribute
const stackRef = useRef<HTMLDivElement>(null);
const setButtonTypes = (element: HTMLElement) => {
const buttons = element.querySelectorAll('button');
buttons.forEach((button) => {
if (button.getAttribute('type') !== 'button') {
button.setAttribute('type', 'button');
}
});
};
useLayoutEffect(() => {
const stackElement = stackRef.current;
if (stackElement) {
setButtonTypes(stackElement);
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach((node) => {
if (node instanceof HTMLElement) {
setButtonTypes(node);
}
});
}
}
});
observer.observe(stackElement, { childList: true, subtree: true });
return () => {
observer.disconnect();
};
}
}, []);
Since the search buttons don't have a "type" attribute, it will submit any form the grid is a child of
I have to hack a listener to add the attribute