[Help] Modal backdrop props is not working

[bmincof]

Hello!

I want to use Cliked Outside Modal. so I set the backdrop props of Modal to true, but nothing works. How can I use this? please help...

Here is my code.

import React, { useState } from 'react';

import { Button, Modal } from 'react-daisyui';

const CustomModal = () => {
  const [visible, setVisible] = useState(false);

  const toggleVisible = () => {
    setVisible(!visible);
  };

  return (
    <div>
      <Button onClick={toggleVisible}>Open Modal</Button>
      <Modal open={visible} backdrop={true}>
        <Modal.Body>Modal Backdrop test</Modal.Body>
      </Modal>
    </div>
  );
};

export default CustomModal;

[benjitrosch]

Hi @bmincof,

please see this example for how to properly handle open and close states using the backdrop property and a ref: https://react-daisyui.netlify.app/?path=/story/actions-modal--clicked-outside

By setting open manually with state AND using the backdrop prop, you're sort of mixing two different ideas. The new modal uses an HTML <dialog> which is why we can use the showModal() and close() functions that are native to the tag.

If you want to just use state, you could use <Modal.Legacy> along with the onClickBackdrop() callback to set the state to false. See this example: https://react-daisyui.netlify.app/?path=/story/actions-modal-legacy--clicked-outside

[bmincof]

@benjitrosch, thanks for the quick response!