-
Goal: Submit a form
-
Details: I have a modal frame that contains a form with a submit button.
It used to work flawlessly but recently it acts up.
Every once in a while (hard to detect what causes that) the submit button won't do anything, and the error message bellow appears in the debug console.
A page refresh seems to solve the issue.
Any idea/directions/workarounds (other than refresh)?
-
Screenshots:
I get this in the debug console:
AppContainer-DpesDhQ4.js:17 Uncaught Error: assetFormProperty.triggerSubmit failed because triggerSubmit is not a method exposed on undefined refs.
at refs.callRefMethod (index-Cb94gkkt.js:170:68928)
at RpcRegistry.callMethod (index-Cb94gkkt.js:180:82782)
at HostRuntime.handleMessageEventWithData (index-Cb94gkkt.js:180:91284)
at index-Cb94gkkt.js:180:94360
at r (AppContainer-DpesDhQ4.js:17:1499)
refs.callRefMethod @ index-Cb94gkkt.js:170
callMethod @ index-Cb94gkkt.js:180
handleMessageEventWithData @ index-Cb94gkkt.js:180
(anonymous) @ index-Cb94gkkt.js:180
r @ AppContainer-DpesDhQ4.js:17
Hey @Rotem_Jacobi Welcome to the community,
In Retool, while the Form component doesn't provide a direct triggerSubmit method, you can programmatically submit a form using JavaScript by calling the .submit() method on the form component.
For example : assetFormProperty.submit();
This typically occurs when attempting to call a method on an undefined reference. To prevent this, ensure that assetFormProperty is correctly defined and accessible in your script. Additionally, verify that the form component has been rendered and is available in the DOM before invoking its methods.
Form docs
If you continue to experience issues, consider alternative approaches such as triggering the form submission through a button's event handler or restructuring your form interactions to avoid direct method calls.
5 Likes
Hi,
The submit is already triggered by clicking the submit button of the form so I don't really understand how the form can be undefined, unless there's something I'm missing here.
Thanks for the prompt answer!
Rotem.
Hey @Rotem_Jacobi
Have you check the data that coming from the form like this {{ form.data }}...
5 Likes
Hi,
I'm not sure what you mean.
What should I expect to find in form. data?
Thanks,
Rotem.
Hey @Rotem_Jacobi,
Could you please check the console from the form submission to see if the data is coming through correctly?
5 Likes
This is the entire message from the console:
VM488 b19869bc-d000-422f-8f6e-94489cbfebad:27 Running ViteJS Retool app variant
src-index-CFjiSYWf.js:164 Retool version 3.181.0-40fb368 (Build 238519)
AppContainer-DpesDhQ4.js:80 removeImmutable appTemplate slice: not enabled 😢
AppContainer-DpesDhQ4.js:8 Performance Log: Time to productivity: 91 ms
AppContainer-DpesDhQ4.js:8 We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320
(anonymous) @ AppContainer-DpesDhQ4.js:8
AppContainer-DpesDhQ4.js:8 We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320
(anonymous) @ AppContainer-DpesDhQ4.js:8
AppContainer-DpesDhQ4.js:8 Performance Log: Time to productivity: 109 ms
index-Cb94gkkt.js:5 Uncaught (in promise) Error: Minified Redux error #7; visit https://redux.js.org/Errors?code=7 for the full message or use the non-minified dev environment for full errors.
at he (index-Cb94gkkt.js:5:46729)
at Object.current (AppContainer-DpesDhQ4.js:80:72570)
at index-Cb94gkkt.js:5:71501
at onMouseLeave (ContainerWidget-CZgnGir1.js:4:8438)
at onMouseLeave (Container-DL7YJko0.js:3:2693)
at Object.jn (src-index-CFjiSYWf.js:82:9832)
at Wi (src-index-CFjiSYWf.js:82:9989)
at Hc (src-index-CFjiSYWf.js:82:10046)
at ql (src-index-CFjiSYWf.js:82:31391)
at gv (src-index-CFjiSYWf.js:82:31811)
at src-index-CFjiSYWf.js:82:37008
at lp (src-index-CFjiSYWf.js:85:37187)
at Lr (src-index-CFjiSYWf.js:82:8968)
at Sh (src-index-CFjiSYWf.js:82:33098)
at ih (src-index-CFjiSYWf.js:82:17325)
at a_ (src-index-CFjiSYWf.js:82:17225)
index-Cb94gkkt.js:5 Uncaught (in promise) Error: Minified Redux error #7; visit https://redux.js.org/Errors?code=7 for the full message or use the non-minified dev environment for full errors.
at he (index-Cb94gkkt.js:5:46729)
at Object.current (AppContainer-DpesDhQ4.js:80:72570)
at index-Cb94gkkt.js:5:71501
at onMouseLeave (ContainerWidget-CZgnGir1.js:4:8438)
at onMouseLeave (Container-DL7YJko0.js:3:2693)
at Object.jn (src-index-CFjiSYWf.js:82:9832)
at Wi (src-index-CFjiSYWf.js:82:9989)
at Hc (src-index-CFjiSYWf.js:82:10046)
at ql (src-index-CFjiSYWf.js:82:31391)
at gv (src-index-CFjiSYWf.js:82:31811)
at src-index-CFjiSYWf.js:82:37008
at lp (src-index-CFjiSYWf.js:85:37187)
at Lr (src-index-CFjiSYWf.js:82:8968)
at Sh (src-index-CFjiSYWf.js:82:33098)
at ih (src-index-CFjiSYWf.js:82:17325)
at a_ (src-index-CFjiSYWf.js:82:17225)
runtime.DKmCxj_E.umd.js:6 Performance Log: Time to first query: 2636 ms
AppContainer-DpesDhQ4.js:8 Performance Log: Time to productivity: 8066 ms
AppContainer-DpesDhQ4.js:20 Uncaught TypeError: Cannot read properties of null (reading 'contains')
at AppContainer-DpesDhQ4.js:20:91871
at Array.some (<anonymous>)
at MutationObserver.<anonymous> (AppContainer-DpesDhQ4.js:20:91861)
AppContainer-DpesDhQ4.js:20 Uncaught TypeError: Cannot read properties of null (reading 'contains')
at AppContainer-DpesDhQ4.js:20:91871
at Array.some (<anonymous>)
at MutationObserver.<anonymous> (AppContainer-DpesDhQ4.js:20:91861)
AppContainer-DpesDhQ4.js:20 Uncaught TypeError: Cannot read properties of null (reading 'contains')
at AppContainer-DpesDhQ4.js:20:91871
at Array.some (<anonymous>)
at MutationObserver.<anonymous> (AppContainer-DpesDhQ4.js:20:91861)
AppContainer-DpesDhQ4.js:20 Uncaught TypeError: Cannot read properties of null (reading 'contains')
at AppContainer-DpesDhQ4.js:20:91871
at Array.some (<anonymous>)
at MutationObserver.<anonymous> (AppContainer-DpesDhQ4.js:20:91861)
AppContainer-DpesDhQ4.js:20 Uncaught TypeError: Cannot read properties of null (reading 'contains')
at AppContainer-DpesDhQ4.js:20:91871
at Array.some (<anonymous>)
at MutationObserver.<anonymous> (AppContainer-DpesDhQ4.js:20:91861)
AppContainer-DpesDhQ4.js:20 Uncaught TypeError: Cannot read properties of null (reading 'contains')
at AppContainer-DpesDhQ4.js:20:91871
at Array.some (<anonymous>)
at MutationObserver.<anonymous> (AppContainer-DpesDhQ4.js:20:91861)
AppContainer-DpesDhQ4.js:20 Uncaught TypeError: Cannot read properties of null (reading 'contains')
at AppContainer-DpesDhQ4.js:20:91871
at Array.some (<anonymous>)
at MutationObserver.<anonymous> (AppContainer-DpesDhQ4.js:20:91861)
AppContainer-DpesDhQ4.js:20 Uncaught TypeError: Cannot read properties of null (reading 'contains')
at AppContainer-DpesDhQ4.js:20:91871
at Array.some (<anonymous>)
at MutationObserver.<anonymous> (AppContainer-DpesDhQ4.js:20:91861)
AppContainer-DpesDhQ4.js:20 Uncaught TypeError: Cannot read properties of null (reading 'contains')
at AppContainer-DpesDhQ4.js:20:91871
at Array.some (<anonymous>)
at MutationObserver.<anonymous> (AppContainer-DpesDhQ4.js:20:91861)
AppContainer-DpesDhQ4.js:20 Uncaught TypeError: Cannot read properties of null (reading 'contains')
at AppContainer-DpesDhQ4.js:20:91871
at Array.some (<anonymous>)
at MutationObserver.<anonymous> (AppContainer-DpesDhQ4.js:20:91861)
AppContainer-DpesDhQ4.js:20 Uncaught TypeError: Cannot read properties of null (reading 'contains')
at AppContainer-DpesDhQ4.js:20:91871
at Array.some (<anonymous>)
at MutationObserver.<anonymous> (AppContainer-DpesDhQ4.js:20:91861)
AppContainer-DpesDhQ4.js:8 We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320
(anonymous) @ AppContainer-DpesDhQ4.js:8
AppContainer-DpesDhQ4.js:17 Uncaught Error: assetFormProperty.triggerSubmit failed because triggerSubmit is not a method exposed on undefined refs.
at refs.callRefMethod (index-Cb94gkkt.js:170:68928)
at RpcRegistry.callMethod (index-Cb94gkkt.js:180:82782)
at HostRuntime.handleMessageEventWithData (index-Cb94gkkt.js:180:91284)
at index-Cb94gkkt.js:180:94360
at r (AppContainer-DpesDhQ4.js:17:1499)
AppContainer-DpesDhQ4.js:17 Uncaught Error: assetFormProperty.triggerSubmit failed because triggerSubmit is not a method exposed on undefined refs.
at refs.callRefMethod (index-Cb94gkkt.js:170:68928)
at RpcRegistry.callMethod (index-Cb94gkkt.js:180:82782)
at HostRuntime.handleMessageEventWithData (index-Cb94gkkt.js:180:91284)
at index-Cb94gkkt.js:180:94360
at r (AppContainer-DpesDhQ4.js:17:1499)
AppContainer-DpesDhQ4.js:17 Uncaught Error: assetFormProperty.triggerSubmit failed because triggerSubmit is not a method exposed on undefined refs.
at refs.callRefMethod (index-Cb94gkkt.js:170:68928)
at RpcRegistry.callMethod (index-Cb94gkkt.js:180:82782)
at HostRuntime.handleMessageEventWithData (index-Cb94gkkt.js:180:91284)
at index-Cb94gkkt.js:180:94360
at r (AppContainer-DpesDhQ4.js:17:1499)
AppContainer-DpesDhQ4.js:17 Uncaught Error: assetFormProperty.triggerSubmit failed because triggerSubmit is not a method exposed on undefined refs.
at refs.callRefMethod (index-Cb94gkkt.js:170:68928)
at RpcRegistry.callMethod (index-Cb94gkkt.js:180:82782)
at HostRuntime.handleMessageEventWithData (index-Cb94gkkt.js:180:91284)
at index-Cb94gkkt.js:180:94360
at r (AppContainer-DpesDhQ4.js:17:1499)
AppContainer-DpesDhQ4.js:17 Uncaught Error: assetFormProperty.triggerSubmit failed because triggerSubmit is not a method exposed on undefined refs.
at refs.callRefMethod (index-Cb94gkkt.js:170:68928)
at RpcRegistry.callMethod (index-Cb94gkkt.js:180:82782)
at HostRuntime.handleMessageEventWithData (index-Cb94gkkt.js:180:91284)
at index-Cb94gkkt.js:180:94360
at r (AppContainer-DpesDhQ4.js:17:1499)
AppContainer-DpesDhQ4.js:17 Uncaught Error: assetFormProperty.triggerSubmit failed because triggerSubmit is not a method exposed on undefined refs.
at refs.callRefMethod (index-Cb94gkkt.js:170:68928)
at RpcRegistry.callMethod (index-Cb94gkkt.js:180:82782)
at HostRuntime.handleMessageEventWithData (index-Cb94gkkt.js:180:91284)
at index-Cb94gkkt.js:180:94360
at r (AppContainer-DpesDhQ4.js:17:1499)
refs.callRefMethod @ index-Cb94gkkt.js:170
callMethod @ index-Cb94gkkt.js:180
handleMessageEventWithData @ index-Cb94gkkt.js:180
(anonymous) @ index-Cb94gkkt.js:180
r @ AppContainer-DpesDhQ4.js:17
AppContainer-DpesDhQ4.js:17 Uncaught Error: assetFormProperty.triggerSubmit failed because triggerSubmit is not a method exposed on undefined refs.
at refs.callRefMethod (index-Cb94gkkt.js:170:68928)
at RpcRegistry.callMethod (index-Cb94gkkt.js:180:82782)
at HostRuntime.handleMessageEventWithData (index-Cb94gkkt.js:180:91284)
at index-Cb94gkkt.js:180:94360
at r (AppContainer-DpesDhQ4.js:17:1499)
refs.callRefMethod @ index-Cb94gkkt.js:170
callMethod @ index-Cb94gkkt.js:180
handleMessageEventWithData @ index-Cb94gkkt.js:180
(anonymous) @ index-Cb94gkkt.js:180
r @ AppContainer-DpesDhQ4.js:17
useControlledState setState callback does not work #2320
closed | [snowystinger](https://github.com/snowystinger) opened this issue on 10 Sep 2021
@Rotem_Jacobi
Ensure the form reference is correctly initialized and not undefined at the time of submission. Avoid conditionally rendering the form or modal, as it may lose the reference. Use form.validate() before triggerSubmit() and reinitialize the form when the modal opens. Add console logs to debug lifecycle issues.
6 Likes