fix(DIST-629): Update iframe reload logic

Matej Lednicky · Matej Lednicky · commit a781a944b1df · 2021-01-27T14:57:28.000+01:00
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.
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', () => {
