DropdownMenu opens Dialog leads to non-clickable page

Describe the bug When I set inside my DropdownMenu event handler a signal to open a Dialog, the page stays non interactive after I close the Dialog. When I set the same signal when DropdownMenu is not opened, everything works as expected.

Reason (probably) It seems that DropdownMenu and Dialog both sets style="pointer-events: none" to the <body> element. And as soon as the user closes these, the body gets it's previous style value.

And this seems to be the problem: as DropdownMenu doesn't resets the style on time before Dialog sets it as well. And Dialog seem to reset it after closing to still pointer-events: none as it read it like this from before.

When I set my signal to open the Dialog with a timeout of 1ms, everything works.

To Reproduce

const App = () => {
  const [dialogDeleteOpen, setDialogDeleteOpen] = createSignal(false);
  const onDelete = () => {
    setDialogDeleteOpen(true);
    // this is a hack which works:
    // setTimeout(() => setDialogDeleteOpen(true), 1);
  }
  return (
    <TaskListMenu onDelete={onDelete} />
  );

  <Show when={dialogDeleteOpen()}>
    <DialogSureToDelete
      onCancel={() => setDialogDeleteOpen(false)}
      onDelete={props.onDelete}
    />
  </Show>
}

const Menu = (props: { onDelete: () => void }) => {
    return (
        <DropdownMenu.Root placement="bottom-end">
            <DropdownMenu.Trigger>...</DropdownMenu.Trigger>
            <DropdownMenu.Content>
                <SheetListItemMenuItem text="Delete" onSelect={props.onDelete} />
            </DropdownMenu.Content>
        </DropdownMenu.Root>
    );
};

Desktop: Arc (Chromium)
"@kobalte/core": "^0.12.1"

kobaltedev / kobalte

DropdownMenu opens Dialog leads to non-clickable page #335