Modern SharePoint Online Page: jump to middle (focus)

[vsusloparov]

Hello,

I added the iframe with custom WebChat to middle of modern SPO page. When I reloading the page SP page jumping to middle. I was checking custom html page that initialized the WebChat js plugin. Without WebChat plugin on page it's working right - page not jumps to the middle. After it I checked the MS iframe from channels panel of "Channel registration" application (or App Bot Web) of Azure portal. I got the same result - the page was jumping to the middle (to iframe location).

I found the similar issue with SPO WP that was fixed two or three months ago. In addition, I found question of StackOwerflow: "Bot framework web chat channel steals page focus", the answer was not helpful to me. We will open the MS SPO support ticket for checking the issue from SPO side.

I don't see the 'focus' or 'blur' events in custom chat bot page. Is it possible that issue can be repaired from WebChat side?

MS Iframe example:

<iframe src="https://webchat.botframework.com/embed/Omnibot_deve?s=xxxxxxxxxxxxxxxxxxxx" style="min-width: 400px; width: 100%; min-height: 500px;" width="100%" height="500"></iframe>

[corinagum]

@Support, we have a workaround that we need to test.

1. Instead of using the iframe embed on Sharepoint, instead host the web chat full bundle (v4) on a web part.
2. Does this issue repro? Is this a viable workaround?
   Greedy focus has been removed in v4.
   @dmvtech

[dmvtech]

Doesn't seem workaround works. I was able to reproduce the focus stealing in SharePoint using an embed webpart pointing to the MockBot location. Additionally, i cloned the master repo, then added a 700px div above the webchat div in samples/full-bundle/index.html. It does still indeed steal focus.

    <div height="700px" style="height:700px; border-style:solid; background-color: red">something</div>
    <div id="webchat"></div>

[corinagum]

Okay. It sounds like we will not be doing a fix for v3 (the embed)
[edit] tracking for greedy focus fix can be found on #568
As for the master repo test, the sample has an autofocus on line 38 that you would have to remove in order to test. Could you try this again?

[dmvtech]

@corinagum

Tested without the focus line. No longer steals focus in embed web part within SharePoint.

[dmvtech]

@vsusloparov Can you please test, removing the following line from index.html:
document.querySelector('#webchat > *').focus();

[vsusloparov]

@vsusloparov Can you please test, removing the following line from index.html:
document.querySelector('#webchat > *').focus();

In our project we are not using the index.html page and don't have such js code row. Please add additional information about the required check.

[dmvtech]

Hi @vsusloparov My apologies. I assumed you were trying the workaround mentioned by @corinagum above.

At this point in time, you have two options:

1. Wait for the fix in React chat component greedy focus #568
2. Host your own WebChat. Here are samples that you can use as a starting point. Per my previous suggestion, I was using the getting started Full bundle. In that one, it does contain the line doing .focus() that you would need to remove.

Closing as bug is being tracked and there is a workaround to host one's own webchat.