fix(DIST-629): Update iframe reload logic

When widget is opened as popup on mobile the iframe needs to be reloaded to make sure we display welcome screen again after the popup is closed. Our current logic stopped working.
Typeform · Jan 27, 2021 · a781a94 · a781a94
1 parent fde02d2
commit a781a94
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 24 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -17,6 +17,7 @@ <h2>Embed snippet</h2>
         <li><a href="./widget-transparent.html">Widget with trasnparent background *</a></li>
         <li><a href="./widget-legacy.html">Widget with legacy hidden fields *</a></li>
         <li><a href="./widget-v2.html">Widget with long text</a></li>
+        <li><a href="./widget-real.html">Widget (real world typeform)</a></li>
         <li><a href="./multi-widget.html">Multiple widgets</a></li>
         <li><a href="./full.html">Full page *</a></li>
         <li><a href="./popup.html">Popups *</a></li>

diff --git a/demo/widget-real.html b/demo/widget-real.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Widget (real typeform)</title>
+    <meta charset="utf-8" />
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+    <link rel="stylesheet" href="demo.css" />
+  </head>
+  <body>
+    <div
+      class="typeform-widget"
+      data-url="https://form.typeform.com/to/jAJ5qj#foo=random internet user"
+      style="width: 100%; height: 500px"
+    ></div>
+
+    <script type="text/javascript" src="embed.js"></script>
+  </body>
+</html>
diff --git a/src/core/make-widget.js b/src/core/make-widget.js
@@ -48,13 +48,6 @@ export default function makeWidget(element, url, options) {
   let queryStrings = replaceExistingKeys(options, queryStringKeys)
   queryStrings = transferUrlParametersToQueryStrings(options.transferableUrlParameters, queryStrings)
 
-  if (enabledFullscreen) {
-    queryStrings = {
-      ...queryStrings,
-      'add-placeholder-ws': true,
-    }
-  }
-
   const urlWithQueryString = appendParamsToUrl(url, queryStrings)
 
   render(

diff --git a/src/core/make-widget.spec.js b/src/core/make-widget.spec.js
@@ -62,7 +62,6 @@ describe('makeWidget', () => {
 
     const widgetURL = component.props.url
     const { query } = UrlParse(widgetURL, true)
-    expect(query['add-placeholder-ws']).toBe('true')
     expect(query['mandarina']).toBeUndefined()
 
     expect(component.type.name).toEqual('Widget')

diff --git a/src/core/views/widget.js b/src/core/views/widget.js
@@ -57,20 +57,11 @@ const PlaceholderAnimationAppear = keyframes`
 `
 
 const PlaceholderAnimationDisappear = keyframes`
-  100% {
-    opacity: 0;
-  }
-
-  75% {
-    opacity: 1;
-  }
-
-
-  25% {
+  0% {
     opacity: 1;
   }
-
-  0% {
+  
+  100% {
     opacity: 0;
   }
 `
@@ -176,7 +167,7 @@ class Widget extends Component {
   goFullScreen() {
     if (this.props.enabledFullscreen) {
       this.setState({ isFullscreen: true })
-      setTimeout(this.reloadIframe, 500)
+      this.reloadIframe()
     }
   }
 
@@ -226,8 +217,11 @@ class Widget extends Component {
 
   reloadIframe() {
     // Re-assign the source of the iframe, makes it reload cross-browser
-    // eslint-disable-next-line
-    this.iframe.iframeRef.src = this.iframe.iframeRef.src
+    const originalSrc = this.iframe.iframeRef.src
+    this.iframe.iframeRef.src = ''
+    setTimeout(() => {
+      this.iframe.iframeRef.src = originalSrc
+    }, 250)
   }
 
   focusIframe() {
@@ -266,6 +260,7 @@ class Widget extends Component {
 
     if (enabledFullscreen) {
       inlineIframeUrl = updateQueryStringParameter('disable-tracking', 'true', inlineIframeUrl)
+      inlineIframeUrl = updateQueryStringParameter('add-placeholder-ws', 'true', inlineIframeUrl)
     }
 
     let fullscreenIframeUrl = updateQueryStringParameter('typeform-welcome', '0', url)

diff --git a/src/core/views/widget.spec.js b/src/core/views/widget.spec.js
@@ -78,10 +78,11 @@ describe('Widget', () => {
       expect(onSubmitMock).toHaveBeenCalledTimes(1)
     })
 
-    it('renders an iframe with disabled submissions', () => {
+    it('renders an iframe with disabled submissions and placeholder welcome screen', () => {
       const wrapper = mount(<Widget enabledFullscreen url={URL} />)
       expect(wrapper.find(Iframe)).toHaveLength(1)
       expect(wrapper.find(Iframe).props().src.includes('disable-tracking=true')).toBe(true)
+      expect(wrapper.find(Iframe).props().src.includes('add-placeholder-ws=true')).toBe(true)
     })
 
     it('renders a second iframe after the welcome-screen-hidden event', () => {