[ BUG ] Dialog X button doesn't close dialog

[adnjoo]

Describe the bug X button on top right of Dialog doesn't close Dialog

Example code

import {
  Dialog,
  ...
} from '@/src/components/ui/dialog';

...

    <Dialog open={isAddingNote}>
      <DialogTrigger asChild>
        <Button variant='outline' onPress={() => setIsAddingNote(true)}>
          <CirclePlus size={24} />
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Add Note</DialogTitle>
          <DialogDescription>Enter your note content below:</DialogDescription>
        </DialogHeader>
        <TextInput
          value={newNoteContent}
          onChangeText={(text) => setNewNoteContent(text)}
          placeholder='Enter your note here...'
          className='mb-3 rounded-sm border border-gray-300 p-3'
        />
        <DialogFooter>
          <DialogClose asChild>
            <Button onPress={() => setIsAddingNote(false)}>
              <Text className='text-white'>Cancel</Text>
            </Button>
          </DialogClose>
          <Button onPress={handleAddNote}>
            <Text className='text-white'>Save</Text>
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>

To Reproduce Steps to reproduce the behavior:

1. install components using CLI npx @react-native-reusables/cli@latest add dialog
2. Open Modal
3. Click on X button
4. Dialog doesn't close

Expected behavior Expect modal to close

Screenshots

Platform (please complete the following information):

• Type: iPhone 15 Simulator iOS 17.4
• OS: MacOS Sonoma 14.2.1
• Browser: N/A

Additional context

I modified DialogContent to pass through handleClose to make the X button close the modal. But there are some types/linting warnings.

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { portalHost?: string }
>(({ className, children, portalHost, handleClose, ...props }, ref) => {
  const { open } = DialogPrimitive.useRootContext();
  return (
    <DialogPortal hostName={portalHost}>
      <DialogOverlay>
        <DialogPrimitive.Content
          ref={ref}
          className={cn(
            'z-50 max-w-lg gap-4 border border-border web:cursor-default bg-background p-6 shadow-lg web:duration-200 rounded-lg',
            open
              ? 'web:animate-in web:fade-in-0 web:zoom-in-95'
              : 'web:animate-out web:fade-out-0 web:zoom-out-95',
            className
          )}
          {...props}
        >
          {children}
          <DialogPrimitive.Close
            className={
              'absolute right-4 top-4 p-0.5 web:group rounded-sm opacity-70 web:ring-offset-background web:transition-opacity web:hover:opacity-100 web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 web:disabled:pointer-events-none'
            }
            onPress={handleClose}
          >
            <X
              size={Platform.OS === 'web' ? 16 : 18}
              className={cn('text-muted-foreground', open && 'text-accent-foreground')}
            />
          </DialogPrimitive.Close>
        </DialogPrimitive.Content>
      </DialogOverlay>
    </DialogPortal>
  );
});
DialogContent.displayName = DialogPrimitive.Content.displayName;

[mrzachnugent]

@adnjoo Unfortunately I cannot reproduce this issue. I added a "handleClose" function that logs "Pressed". It logs and the dialog closes successfully on press of the "x" button.

Can you make sure your files are up to date? If the problem persists, can you provide a minimal reproduction repo as it is the only way I could look into this?

[mrzachnugent]

Closing due to inactivity.

If you are still experiencing this issue, please open a new issue with a minimal reproduction repo