# Onebox-preview para typeform rouba o foco

**URL:** <https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948>\
**Category:** Product Support\
**Tags:** onebox, pr-welcome\
**Created:** [28 Junho , 2018 12:12 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948 "2018-06-28T12:12:06Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![John\_Waltrip1](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/john_waltrip1/32/98972_2.png) [@John\_Waltrip1](https://meta.discourse.org/u/John_Waltrip1)\
**Post date:** [28 Setembro , 2018 20:51 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/22 "2018-09-28T20:51:20Z")

</div>

What a pain. I, too, am disappointed this feature was killed. The remedy appears to have been worse than the illness in this case.

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [29 Setembro , 2018 00:37 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/23 "2018-09-29T00:37:16Z")

</div>

I would recommend a post in #Marketplace to commission a plugin using the official embed api

---

<div class="post-metadata">

**Author:** ![Senthil](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/senthil/32/116238_2.png) [@Senthil](https://meta.discourse.org/u/Senthil)\
**Post date:** [29 Setembro , 2018 01:37 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/24 "2018-09-29T01:37:40Z")

</div>

Hi @sam - That’s a one option. How about reverting the change? As the preview form stealing focus does not seem like a huge issue. ( I am user, I am not even sure what that means).

EDIT: I got what the issue is - the Focus is stolen only during the preview mode, like when you are actually typing something in the box when the typeform link. Usually, when the typeform embed is used, you just paste the link (because it needs a wide area to expand and show the form). If you want to type somethig, type it and then paste the link.

I personally think that we overdid something as a fix here by removing the support completely and then wait for SDK based solution.

Ofcourse, this is your call. We as users (two of us) got a negative impression here, and I know how to do some ugly workaround with my requirements and due to lack of this.

---

<div class="post-metadata">

**Author:** ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)\
**Post date:** [29 Setembro , 2018 01:50 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/25 "2018-09-29T01:50:47Z")

</div>

> [@Senthil](#):
>
> the Focus is stolen only during the preview mode

The focus is also stolen when the Typerform embed is in view when the topic/post is loaded, as per:

> [@techAPJ](#):
>
> on topic render the focus was jumping to Typeform causing page jiggling which we absolutely despise.

That is a deal-breaker.

---

<div class="post-metadata">

**Author:** ![Stephen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephen/32/95011_2.png) [@Stephen](https://meta.discourse.org/u/Stephen)\
**Post date:** [29 Setembro , 2018 02:37 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/26 "2018-09-29T02:37:08Z")

</div>

> [@Senthil](#):
>
> I personally think that we overdid something as a fix here by removing the support completely and then wait for SDK based solution.

You’re very wrong here, it also hijacked focus whenever the embed was visible, making the removal a necessity. Your best options are #Marketplace or maybe reaching out to Typeform directly. I know @techAPJ spoke to them back in July, perhaps as a customer you will have more luck.

There hasn’t been a clarion call from Typeform users to reinstate the embeds because the use case is very specific - @bas may have filed the issue initially, but it was affecting every discourse instance where typeform is embedded. If Typeform is a business critical need I suggest @Senthil and @John_Waltrip1 combine their budgets and get a developer on the case.

---

<div class="post-metadata">

**Author:** ![Senthil](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/senthil/32/116238_2.png) [@Senthil](https://meta.discourse.org/u/Senthil)\
**Post date:** [29 Setembro , 2018 03:35 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/27 "2018-09-29T03:35:45Z")

</div>

Hi @Stephen (@sam ) - Let us not push folks to #Marketplace - Some of us are developers are very well capable of supporting ourselves. And it is one the reasons we choose a open source platform like discourse.

When I found a bug, and noticed what happened, and I am engaging with others here. Pushing members who come for support to #Marketplace seems a bit odd. I already shared what my backup plan was as for my immediate need.

I respect discourse teams choices.

> [@techAPJ](#):
>
> The focus is also stolen when the Typerform embed is in view when the topic/post is loaded, as per:
> 
> ![](https://global.discourse-cdn.com/meta/original/3X/e/5/e5fcff1cebbd95a141ae09e7e619814adcd2ca31.png) techAPJ:
> 
> on topic render the focus was jumping to Typeform causing page jiggling which we absolutely despise.

I wonder why I had not noticed any of these, and I never something that bothered me with my usage. I will see what I can do for myself. I have limited time now, I cannot contribute to enabling this in discourse atm.

Thank you,  
Senthil

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [1 Outubro , 2018 01:29 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/28 "2018-10-01T01:29:27Z")

</div>

> [@Senthil](#):
>
> Let us not push folks to #Marketplace

> [@Senthil](#):
>
> I have limited time now, I cannot contribute to enabling this in discourse atm

🤔 If you have no time but have **yes** money, it seems to me perfectly reasonable to point you at #Marketplace . We have zero paying customers asking for a fix here and can not justify development time to build the custom plugin. We are not going to revert our change here, if you want the feature it needs to be implemented properly using the embed API. This clearly costs **time** and time translates pretty cleanly to money.

---

<div class="post-metadata">

**Author:** ![BenLeong](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/benleong/32/60951_2.png) [@BenLeong](https://meta.discourse.org/u/BenLeong)\
**Post date:** [9 Outubro , 2018 02:18 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/29 "2018-10-09T02:18:14Z")

</div>

Just found this thread, when looking for reasons why all our embedded Typeforms have stopped working…

We now have a few different teams who use Typeform on our forums, and the custom Onebox integration was a major factor in deciding to get a paid account with them - seamless embedding is a much nicer user experience than sending them off-site to load a survey page.

I’m not sure what I can contribute towards getting that custom plugin built, but I wanted to post here so there _was_ at least one paying customer in this thread 😉

---

<div class="post-metadata">

**Author:** ![John\_Waltrip1](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/john_waltrip1/32/98972_2.png) [@John\_Waltrip1](https://meta.discourse.org/u/John_Waltrip1)\
**Post date:** [9 Outubro , 2018 02:31 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/30 "2018-10-09T02:31:23Z")

</div>

Thanks for the post @BenLeong!

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [9 Outubro , 2018 02:42 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/32 "2018-10-09T02:42:08Z")

</div>

> [@BenLeong](#):
>
> the custom Onebox integration was a major factor in deciding to get a paid account with them - seamless embedding is a much nicer user experience than sending them off-site to load a survey page.

If you are also a customer of typeform, perhaps you could bring it up with them? Their code is calling the focus action, not ours – so we’d be building a workaround for someone else’s code behaviors.

Better to fix it at the source so it gets fixed for everyone, I think.

---

<div class="post-metadata">

**Author:** ![BenLeong](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/benleong/32/60951_2.png) [@BenLeong](https://meta.discourse.org/u/BenLeong)\
**Post date:** [9 Outubro , 2018 03:57 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/34 "2018-10-09T03:57:42Z")

</div>

Will do - I’ll direct them to this thread for more details, if they need them.

---

<div class="post-metadata">

**Author:** ![BenLeong](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/benleong/32/60951_2.png) [@BenLeong](https://meta.discourse.org/u/BenLeong)\
**Post date:** [21 Novembro , 2018 01:08 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/35 "2018-11-21T01:08:12Z")

</div>

No luck with Typeform, unfortunately - this was the response after the query was escalated to their developers:

> As this is a custom embed, it isn’t something we can assist with, I’m afraid.
> 
> As your site isn’t a static site they recommended that, if you are looking to customise your embedded typeform, then our [Embed SDK](https://developer.typeform.com/embed/) might be better-suited for this purpose.

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [21 Novembro , 2018 08:31 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/37 "2018-11-21T08:31:26Z")

</div>

We are thinking about this and will see if we can find someone in the wider community to build this. There is quite a lot of work in building this in a secure way. Essentially this embed API is expecting Discourse to trust a 3rd party JS payload to run within the same page as Discourse, isolating it into an iframe may be possible but its a tricky thing to build.

I am curious though at a more high level, what specific examples do you use typeform for? Maybe a native Discourse plugin with similar functionality is the path we should take longer term?

---

<div class="post-metadata">

**Author:** ![Roman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/roman/32/157504_2.png) [@Roman](https://meta.discourse.org/u/Roman)\
**Post date:** [6 Fevereiro , 2019 22:54 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/38 "2019-02-06T22:54:21Z")

</div>

I came up with a working example using the SDK inside an iframe: [Codepen](https://codepen.io/romanrizzi/pen/WPXGEP). Codepen re-renders the preview when something changes and the focus remains on the HTML editor.

I modified the TypeForm example ([Original Codepen](https://codepen.io/Typeform/pen/rzaMEB)) injecting the `<div>` and `<script>` inside the IFrame through the [srcdoc attribute](https://www.w3schools.com/tags/att_iframe_srcdoc.asp) and changed the references in order to avoid leaning on `window`.

If we need to support older browsers, we could inject the iframe content via JS (with another script tag)

I don’t know if it’s acceptable to render inline scripts inside a Onebox Engine. If it is, we could simply bring the deleted engine back and tweak it to use this technique without the need of a custom plugin.

Any thoughts? Thanks!

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [6 Fevereiro , 2019 22:59 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/39 "2019-02-06T22:59:19Z")

</div>

> [@Roman](#):
>
> If we need to support older browsers

Keep in mind Discourse is very aggressive about deprecating old browser support, as it stands we support: IE11 and up.

In this particular case we would recommend a polyfill for edge and IE. [Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/#feat=iframe-srcdoc) we have a few other polyfills going now.

Inline scripts are a huge no-no, what we would do is defer load them similar to how [Discourse Graphviz](https://meta.discourse.org/t/graphviz-plugin/97554) does it.

Given the JS requirement here my recommendation here is to start with a very specific `discourse-typeform` plugin here instead of attempting to bring this in to onebox.

---

<div class="post-metadata">

**Author:** ![Roman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/roman/32/157504_2.png) [@Roman](https://meta.discourse.org/u/Roman)\
**Post date:** [8 Fevereiro , 2019 17:59 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/40 "2019-02-08T17:59:15Z")

</div>

> [@sam](#):
>
> Given the JS requirement here my recommendation here is to start with a very specific `discourse-typeform` plugin here instead of attempting to bring this in to onebox.

Looks like passing the param: `typeform-embed=embed-widget` solves the focus issue ([example](https://codepen.io/romanrizzi/pen/OdQRwz)). When doing this through the SDK, an IFrame that contains that parameter as a query string in the original URL is created.

Other options listed [here](https://developer.typeform.com/embed/modes/) can also be passed as query strings.

In my opinion, adding these parameters to the original engine is enough, but I will be happy to start working on a plugin if that is a better option

---

<div class="post-metadata">

**Author:** ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)\
**Post date:** [8 Fevereiro , 2019 19:23 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/41 "2019-02-08T19:23:51Z")

</div>

So you mean we can just revert the changes and add that query param to fix the focus steal?

---

<div class="post-metadata">

**Author:** ![Roman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/roman/32/157504_2.png) [@Roman](https://meta.discourse.org/u/Roman)\
**Post date:** [8 Fevereiro , 2019 19:41 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/42 "2019-02-08T19:41:36Z")

</div>

Yes! 😄

Please take a look at the [SDK example](https://codepen.io/Typeform/pen/rzaMEB) and inspect the source, you will note that the SDK is rendering an `iframe` and doing exactly what I’m proposing.

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [8 Fevereiro , 2019 22:17 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/43 "2019-02-08T22:17:18Z")

</div>

Wow awesome, if it works, go ahead and submit a PR to onebox! We can get it deployed here to confirm

---

<div class="post-metadata">

**Author:** ![Roman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/roman/32/157504_2.png) [@Roman](https://meta.discourse.org/u/Roman)\
**Post date:** [9 Fevereiro , 2019 00:12 UTC](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948/45 "2019-02-09T00:12:53Z")

</div>

Here it is. I have not tried it against a discourse local instance yet (Still trying to set it up on my machine)

[https://github.com/discourse/onebox/pull/394](https://github.com/discourse/onebox/pull/394)

[Página anterior](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948.md?page=1)

[Próxima página](https://meta.discourse.org/t/onebox-preview-for-typeform-steals-focus/90948.md?page=3)