My typeform keeps reloading whenever I scroll anywhere in mobile

Hello Yasir, 

Sorry about your issue I know how frustrated you are. I’ll leave a few solutions which might solve your issue:

1. Try reducing the size of your images and videos to see if this resolves the issue.
2.  Try reducing the number of questions to see if this resolves the issue.
3. Try testing your Typeform on different mobile devices to see if the issue persists.
4. If there are JavaScript errors on your Typeform, it can cause the form to re-render when you scroll on a mobile device. Check the console for any JavaScript errors and fix them. - If you can't code/debug just ignore this one. 

If all of these this does not help are two solutions left

1. Contact Typeform Support for assistance. They can help diagnose the issue and provide a solution.
2. Create a new Typeform ( with 2 questions) to see if it’s a general issue. If not try making a new copy of the former quiz - for each question published refresh to make sure you spot the issue.

Hope it helps.

Hi @yasir ghouri If you’d like to share the URL where your form is located with us, we’re also happy to take a look!

Hi @Liz ,

Problem I am facing is that whenever my users open my type form on my website it starts re-rendering. This issue is faced mostly on mobile devices but it also happened on desktop a few times while testing. I integrated type form on my website 1 and half year ago and back then it worked well and even 6 months before we published a feedback and type form was working fine. Suddenly from last 2-3 months type form has started acting weird with the re-rendering issue.

I am using type form version

"@typeform/embed-react": "^1.12.0",

Initially I thought maybe if I upgrade my type form library version the issue will resolve but even with the latest type form version I was getting the same issue. So far what I have found through my debugging is that if I pass onSubmit function to type form then this issue is happening. If I remove the onSubmit function then type form works fine but I need this onSubmit function to perform certain database changes. 
 

<Widget hidden={hiddenFields} onSubmit={onSubmit} id={formId} className="feedback-form" />

Here is the link of my website where you can take a look at the issue (make sure to open this website from mobile device). : My Website

I need to publish another survey to my users after a month that’s why it is very important that I get this problem fixed otherwise I’ll have to look for type form alternatives and implement them which is not I want.

Thanks! 

@mathio might be able to help you out with this one!

It worked!!!🎉

Thanks alot @Liz @mathio 🤗

Glad to hear it, @yasir ghouri ! Let us know if we can help with anything else. 😀

Hi!
I am experiencing the same issue, my typeform keeps rerendering whenever I scroll anywhere in mobile device.
The solution Wrapping the onSubmit function in useCallback sounds good. But I have no idea how to do this. Is there a reference for this? Or could you share the code you implemented?
Thanks a lot.

const handleSubmit = useCallback(() => {

    // Your function which you wan to call on submit    

}, []);

and then pass this function in the prop of onSubmit

Hi @Deshna Can you send the URL where you have the form embedded? Thanks!

Hi Liz,

the site is still in development. There are 6 forms embedded like this:

https://staging.addupp.nl/rapid-reviews/risico-management/
 

Thank you, @Deshna ! @mathio do you happen to have any idea why this might keep rendering on mobile? I’m seeing it happen on an iPhone. 

I am sorry but in this case I can not help unless I see the source code. 

@Deshna did you wrap all of your callback functions in useCallback? In React apps a component is re-rendered every time a prop changs. If you change any props for your typeform (eg. hidden field) the typeform will reload as that is how iframes work.

Hi Mathio,

Thank you for your reply. I appreciate that.
I did not wrap callback functions, because I do not know how to do this.
Can you elaborate on that or share code how to implement this fix?
I simply embedded Typeform code in a Divi code module.

From what you are saying it looks like you are not embedding as React component. However this thread is about using React components. The issue in this thread not solution do not apply to your case.

I tried debugging your page in Safari on iPhone - on each scroll I can see new errors displayed in browser console: 

It looks like there is some recurring issue that happens on page scroll. It might also be affecting your embedded typeform. I am sorry but I can not help you any further.

Thank you for explaining this. That is a lot of errors!

I was not aware I was in a React thread but now I know. I will turn to the Typeform support instead.

Thanks again for taking the time. Have a nice day!

@Deshna feel free to ask Typeform support for help. However it looks like those errors are coming from other scripts than your embedded typeform. I dont think support will be able to help with this.