fix: suppress hydration warning (#6910)

Author: Lukas742

packages/main/src/internal/withWebComponent.tsx

@@ -43,9 +43,7 @@ export const withWebComponent = <Props extends Record<string, any>, RefType = Ui
     const Component = (tagNameSuffix ? `${tagName}-${tagNameSuffix}` : tagName) as unknown as ComponentType<
       CommonProps & { class?: string; ref?: Ref<RefType> }
     >;
-
     const [isDefined, setIsDefined] = useState(definedWebComponents.has(Component));
-
     // regular props (no booleans, no slots and no events)
     const regularProps = regularProperties.reduce((acc, name) => {
       if (Object.prototype.hasOwnProperty.call(rest, name) && isPrimitiveAttribute(rest[name])) {
@@ -152,6 +150,9 @@ export const withWebComponent = <Props extends Record<string, any>, RefType = Ui
       return events;
     }, {});
 
+    // In React 19 events aren't correctly attached after hydration
+    const [attachEvents, setAttachEvents] = useState(!webComponentsSupported || !Object.keys(eventHandlers).length); // apply workaround only for React19 and if event props are defined
+
     // non web component related props, just pass them
     const nonWebComponentRelatedProps = Object.entries(rest)
       .filter(([key]) => !regularProperties.includes(key))
@@ -188,7 +189,11 @@ export const withWebComponent = <Props extends Record<string, any>, RefType = Ui
       });
     }, [Component, ...propsToApply]);
 
-    if ((waitForDefine && !isDefined) || typeof window === 'undefined') {
+    useEffect(() => {
+      setAttachEvents(true);
+    }, []);
+
+    if (waitForDefine && !isDefined) {
       return null;
     }
 
@@ -203,7 +208,7 @@ export const withWebComponent = <Props extends Record<string, any>, RefType = Ui
           ref={componentRef}
           {...booleanProps}
           {...restRegularProps}
-          {...eventHandlers}
+          {...(attachEvents ? eventHandlers : {})}
           {...nonWebComponentRelatedProps}
           overflow-mode={overflowMode ?? (showOverflowInPopover ? 'Popover' : 'InPlace')}
           // @ts-expect-error: text is available
@@ -222,7 +227,7 @@ export const withWebComponent = <Props extends Record<string, any>, RefType = Ui
         ref={componentRef}
         {...booleanProps}
         {...regularProps}
-        {...eventHandlers}
+        {...(attachEvents ? eventHandlers : {})}
         {...nonWebComponentRelatedProps}
         class={className}
         suppressHydrationWarning