Search code examples
reactjstypescriptchakra-ui

Chakra UI type problem with useDisclosure

I'm trying to use the alert dialog example from chakra ui docs, but I got some issues with typing:

    const { isOpen, onOpen, onClose } = useDisclosure();
    {...}
        <AlertDialog
                    motionPreset="slideInBottom"
                    leastDestructiveRef={cancelRef}
                    onClose={onClose}
                    isOpen={isOpen}
                    isCentered
        >
                <Button ref={cancelRef} onClick={onClose}>
                    Cancel
                </Button>
        </AlertDialog>

I got the following errors from the leastDestructiveRef and ref:

Type 'MutableRefObject' is not assignable to type 'RefObject'.

Type 'MutableRefObject' is not assignable to type 'LegacyRef | undefined'.

Solution

  • I had the same issue with Chakra. As in Linda Paiste's answer, this fixed it for me:

    import { useRef } from 'react';
...
const cancelRef = useRef<HTMLButtonElement>(null);