how to reset modal component state on close?

this is in my modal component:

interface Props {
  modalProps: ModalProps
  formProps: FormProps
  isFormLoading: boolean
}

export default function NotificationSettingsModal({ modalProps, formProps, isFormLoading }: Props) {
  const [isEnabled, setIsEnabled] = useState(false)

  return (
    <Modal {...modalProps} width={500} centered title='Notifications' closable={true} destroyOnClose>
      <Spin spinning={isFormLoading}>
        <Form {...formProps}>
          <Form.Item name='slack_notifier' valuePropName='checked'>
            <Checkbox onChange={(e) => setIsEnabled(e.target.checked)}>Enable Slack Notifications for this task</Checkbox>
          </Form.Item>
          {isEnabled && (
            <>
              <Divider />
              <Form.Item name='notify_client_slack_channel' valuePropName='checked'>
                <Checkbox>Notify client slack channel</Checkbox>
              </Form.Item>
            </>
          )}
        </Form>
      </Spin>
    </Modal>
  )
}

interface Props {
  modalProps: ModalProps
  formProps: FormProps
  isFormLoading: boolean
}

export default function NotificationSettingsModal({ modalProps, formProps, isFormLoading }: Props) {
  const [isEnabled, setIsEnabled] = useState(false)

  return (
    <Modal {...modalProps} width={500} centered title='Notifications' closable={true} destroyOnClose>
      <Spin spinning={isFormLoading}>
        <Form {...formProps}>
          <Form.Item name='slack_notifier' valuePropName='checked'>
            <Checkbox onChange={(e) => setIsEnabled(e.target.checked)}>Enable Slack Notifications for this task</Checkbox>
          </Form.Item>
          {isEnabled && (
            <>
              <Divider />
              <Form.Item name='notify_client_slack_channel' valuePropName='checked'>
                <Checkbox>Notify client slack channel</Checkbox>
              </Form.Item>
            </>
          )}
        </Form>
      </Spin>
    </Modal>
  )
}

If the user closes the modal, I would want isEnabled to reset. I figured using destoryOnClose would fix this issue but it doesnt.

2 Replies

kapa.ai•5mo ago

Hi @Syn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In your case, you can use the autoResetForm property of the useModalForm or useDrawerForm hooks provided by Refine. When autoResetForm is set to true, the form will be reset after a successful submit. It is true by default. Here is an example of how you can use it:

const modalForm = useModalForm({  
 modalProps: {  
 autoResetForm: true,  
 },  
});

const modalForm = useModalForm({  
 modalProps: {  
 autoResetForm: true,  
 },  
});

However, this will only reset the form fields, not the isEnabled state. To reset the isEnabled state when the modal is closed, you can use the onCancel prop of the Modal component to set isEnabled back to false. Here is how you can do it:

<Modal 
  {...modalProps} 
  width={500} 
  centered 
  title='Notifications' 
  closable={true} 
  destroyOnClose
  onCancel={() => setIsEnabled(false)}
>

<Modal 
  {...modalProps} 
  width={500} 
  centered 
  title='Notifications' 
  closable={true} 
  destroyOnClose
  onCancel={() => setIsEnabled(false)}
>

In this way, whenever the modal is closed, isEnabled will be set back to false. Please note that the destroyOnClose prop you're using only destroys the modal's elements from the DOM when it's closed, it doesn't reset any state or form fields. For more information, you can refer to the following documentation: - useModalForm (https://refine.dev/docs/ui-integrations/mantine/hooks/use-modal-form#autoresetform) - useDrawerForm (https://refine.dev/docs/ui-integrations/mantine/hooks/use-drawer-form#autoresetform) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@183085423604662273> kapa.ai is still learning and improving, please let us know how it did by reacting below