Refine•13mo ago

useCustomModalForm

how to not close the form and invalidate on success and only invalidate when the form is closed manually.

kapa.ai•12/12/24, 12:52 PM

Hi @Joe Gaffney. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•12/12/24, 12:53 PM

----------------------
To achieve what you're asking with , you'll need to customize a few settings. Here's how you can prevent the form from closing automatically on success, while still invalidating queries when the form is closed manually:

Set to
```
false
```
```
false
```
to prevent the modal from closing automatically after a successful submit:

Use the property of the feature to invalidate queries when the modal is closed manually:

To handle the invalidation manually when closing the form, you can use the
```
close
```
```
close
```
function returned by
```
useModalForm
```
```
useModalForm
```
along with the hook:

By combining these approaches, you can keep the form open after a successful submission and only invalidate queries when the form is closed manually.

Sources:
useModalForm Properties (https://refine.dev/docs/packages/react-hook-form/use-modal-form/#properties)
useModalForm Return Values (https://refine.dev/docs/packages/react-hook-form/use-modal-form/#return-values)
useModalForm autoSave (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#autosave)
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•12/12/24, 12:53 PM

@422289470487003153 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

sad-indigoOP•12/12/24, 1:09 PM

@kapa.ai can i overide the model from close to do this

kapa.ai•12/12/24, 1:09 PM

Let me check the knowledge base for you again. One moment!

kapa.ai•12/12/24, 1:09 PM

----------------------
Yes, you can override the modal's close behavior to implement custom logic, including query invalidation. Here's how you can do it:

First, you'll need to use the
```
close
```
```
close
```
function returned by
```
useModalForm
```
```
useModalForm
```
and combine it with your custom logic:

Then, you can create a custom close function that includes your invalidation logic:

Now, you can use this function instead of the original
```
close
```
```
close
```
function:

By doing this, you're overriding the default close behavior of the modal to include your custom invalidation logic. This way, queries will only be invalidated when the form is closed manually, and not automatically after a successful submission.

Remember to adjust the resource name and the query types you want to invalidate based on your specific use case.

useModalForm Return Values (https://refine.dev/docs/packages/react-hook-form/use-modal-form/#return-values)
Invalidation Guide (https://refine.dev/docs/guides-concepts/forms/#invalidation-)
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•12/12/24, 1:09 PM

@422289470487003153 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

sad-indigoOP•12/12/24, 1:13 PM

@kapa.ai uis there another way to listen if the form is closed then invalidate

kapa.ai•12/12/24, 1:13 PM

Let me check the knowledge base for you again. One moment!

kapa.ai•12/12/24, 1:13 PM

----------------------
Yes, there is another way to listen for when the form is closed and then invalidate queries. You can use the callback provided by the

useModalForm

useModalForm

hook. Here's how you can implement this approach:

First, import the necessary hooks:

Then, set up your
```
useModalForm
```
```
useModalForm
```
hook with an callback:

In this setup, the callback will be triggered whenever the modal is closed, either by clicking the close button, clicking outside the modal, or programmatically closing it. When this happens, it will run the invalidation logic.

This approach has the advantage of being more declarative and doesn't require overriding the default

close

close

function. It also ensures that the invalidation happens regardless of how the modal is closed.

Remember to replace "your-resource" with the actual resource name you're working with, and adjust the array to include the query types you want to invalidate.

useModalForm Properties (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#properties)
useInvalidate Hook (https://refine.dev/docs/data/hooks/use-invalidate/)
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•12/12/24, 1:13 PM

@422289470487003153 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

sad-indigoOP•12/12/24, 1:14 PM

@kapa.ai modelProps does not support that

kapa.ai•12/12/24, 1:14 PM

Let me check the knowledge base for you again. One moment!

kapa.ai•12/12/24, 1:15 PM

----------------------
I apologize for the confusion in my previous response. You are correct that does not directly support an callback as I suggested. Thank you for pointing that out. Let me provide a more accurate solution based on the available options in

useModalForm

useModalForm

.

Instead of using , we can use the

close

close

function returned by

useModalForm

useModalForm

along with the hook to listen for changes in the modal's visibility. Here's how you can implement this:

In this approach, we're using the state returned by

useModalForm

useModalForm

to detect when the modal is closed. The

useEffect

useEffect

hook will run whenever the state changes, and if it becomes

false

false

(indicating the modal has closed), it will trigger the invalidation.

This method allows you to listen for the modal closing and perform the invalidation without overriding the default

close

close

behavior or relying on unsupported props.

Remember to replace "your-resource" with your actual resource name and adjust the array as needed for your use case.

useModalForm Return Values (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#return-values)
useInvalidate Hook (https://refine.dev/docs/data/hooks/use-invalidate/)
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•12/12/24, 1:15 PM

@422289470487003153 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

sad-indigoOP•12/12/24, 1:22 PM

@kapa.ai but then this will run on mount

kapa.ai•12/12/24, 1:22 PM

Let me check the knowledge base for you again. One moment!

kapa.ai•12/12/24, 1:22 PM

----------------------
You're absolutely right, and I apologize for overlooking that detail. You've made a very astute observation. The

useEffect

useEffect

hook would indeed run on mount, which is not the desired behavior in this case. Let's refine our approach to avoid this issue.

We can modify our solution to use a ref to track whether the component has mounted, ensuring we only invalidate when the modal is actually closed and not on the initial mount. Here's an improved version:

In this updated version:

We use a hook to create a mutable flag.
On the first render, is
```
false
```
```
false
```
, so we just set it to
```
true
```
```
true
```
and don't run the invalidation.
On subsequent renders, when changes and is
```
true
```
```
true
```
, we check if the modal has been closed () and only then run the invalidation.

This approach ensures that the invalidation only occurs when the modal is actually closed, not on the initial mount or when it opens.

useModalForm Return Values (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#return-values)
useInvalidate Hook (https://refine.dev/docs/data/hooks/use-invalidate/)
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•12/12/24, 1:22 PM

@422289470487003153 Kapa.ai is still learning and improving, please let me know how I did by reacting below.