Modal events don't work on React 19

Polaris
1

Hello,

On React 19 (did not try on older version) none of the modal events work. To reproduce the issue:

<s-modal onHide={() => alert('HIDE')} onAfterHide={() => alert('AFTER HIDE')}>

</s-modal>

Then open/hide the modal. The same happens for the two show and afterShow events.

Thanks!

2

Thanks for reporting! I was able to confirm here https://codesandbox.io/p/devbox/polaris-wc-react-template-forked-lywn3f?workspaceId=ws_2hwbDQnoDWqZjgYjLNSEoC

We’ll let you know when we have updates to share.

4

For reference @Anthony_Frehner , none of the Popover events are working neither.

5

I’m seeing the same issue with s-banner and its onAfterHide and onDismiss events:

<s-banner heading={title} tone="info" dismissible onAfterHide={handleHide}>
  {description}
</s-banner>

I got them to work if I use lower case:

<s-banner heading={title} tone="info" dismissible onafterhide={handleHide}>
  {description}
</s-banner>

However that throws a TS error:

Type ‘{ children: string; heading: string; tone: “info”; dismissible: true; onafterhide: () => void; }’ is not assignable to type ‘Omit<ReactProps$S, “secondaryActions”> & ReactBaseElementPropsWithChildren’.
Property ‘onafterhide’ does not exist on type ‘Omit<ReactProps$S, “secondaryActions”> & ReactBaseElementPropsWithChildren’. Did you mean ‘onAfterHide’?ts(2322)

Another way to get around is to destructure the parameter:

<s-banner
  heading={title}
  tone="info"
  dismissible
  {...({ onafterhide: handleHide } as Record<string, () => void>)}
>
  {description}
</s-banner>

The docs list that “Event names are automatically converted to lowercase (onClick becomes click)”, but that seems broken in React 19.