diff --git a/packages/main/src/internal/withWebComponent.tsx b/packages/main/src/internal/withWebComponent.tsx index e715771ee59..6281b1ccbbb 100644 --- a/packages/main/src/internal/withWebComponent.tsx +++ b/packages/main/src/internal/withWebComponent.tsx @@ -43,9 +43,7 @@ export const withWebComponent = , RefType = Ui const Component = (tagNameSuffix ? `${tagName}-${tagNameSuffix}` : tagName) as unknown as ComponentType< CommonProps & { class?: string; ref?: Ref } >; - 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 = , 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 = , 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 = , 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 = , RefType = Ui ref={componentRef} {...booleanProps} {...regularProps} - {...eventHandlers} + {...(attachEvents ? eventHandlers : {})} {...nonWebComponentRelatedProps} class={className} suppressHydrationWarning