[0.2.0] Page scrolling to <ReactTypeformEmbed /> component on load. Any workarounds?

[HiMarioLopez]

Howdy!

On page load we're taken all the way to the bottom of the page and the user has to scroll all the way up. (So I position my ReactTypeformEmbed at the very bottom of the page, and then the user is scrolled to that component not after the component is loaded (tried fixing with a setScroll on the componentWillMount function), but after the (embedded) typeform pagee loads.

Here's a snippit for context:

        <div className={classNames(classes.main, classes.mainRaised)}>
          <div className={classes.container}>
            <ScrollableAnchor id={"about-us"}>
              <SectionAboutUs />
            </ScrollableAnchor>
            <SectionTeam style={{ marginTop: "-150px" }} />
            <ScrollableAnchor id={"faq"}>
              <SectionFAQ />
            </ScrollableAnchor>
            <ScrollableAnchor id={"schedule"}>
              <SectionSchedule />
            </ScrollableAnchor>
            <SectionSponsors />
            <ScrollableAnchor>
              <SectionWork /> {/* <ReactTypeformEmbed  LIVES HERE!!! /> */}
            </ScrollableAnchor>
          </div>
        </div>

Full source for that page found here: https://github.com/MarioLopezBaylor/wacode-site/blob/master/src/views/LandingPage/LandingPage.jsx

And here's the render function from the <SectionWork /> component:

  render() {
    const { classes } = this.props;
    return (
      <div className={classes.section}>
        <GridContainer
          justify="center"
          style={{ height: "475px", width: "100%" }}
        >
          <GridItem cs={12} sm={8} md={8}>
            <h2 className={classes.title}>Work with us</h2>
            <h4 className={classes.description}>
              Wacode is looking for sponsors and community partners. We want to
              find business and organizations who believe and support our
              mission of bringing technology to our local community, and
              providing a platform for our flourishing tech community.
            </h4>
            <ReactTypeformEmbed
              popup={false}
              url="https://wacodeteam.typeform.com/to/mpK8Ns"
            />
          </GridItem>
        </GridContainer>
      </div>
    );
  }

Full source for this other component found here: https://github.com/MarioLopezBaylor/wacode-site/blob/master/src/views/LandingPage/Sections/SectionWork.jsx

If you need more context, here's the full repo: https://github.com/MarioLopezBaylor/wacode-site

Maybe I'm being dumb about this? Let me know.

Thanks for looking into it!

[AmirBraham]

I'm having the same issue !

[AndriusDK]

Same here any solutions?

[ChristopheBougere]

Did you find any workaround?

[HiMarioLopez]

Did you find any workaround?

I have not. Have since moved to directly linking to the form.

[davidgamero]

Same this keep happening

[davidgamero]

After some testing, it seems to only happen in Firefox not Chrome

[Quelu]

A workaround is to use the embed code given by Typeform and putting the script tag in my index.html. Your div should look like this one

<div
    className="typeform-widget"
    data-url="your-typeform-url"
    style={{ height: '100%' }}
></div>

[niklaslavrell]

I stumbled on this a few months back. I solved it by putting the component at the top of the page and using the React Context API to expose the open() function to the children. Something like this:

    <>
      <ReactTypeformEmbed
        ref={typeformRef}
        ...
      />
      <TypeformContext.Provider
        value={{ open: () => typeformRef.current.typeform.open() }}
      >
        <App />
      </TypeformContext.Provider>
    </>