Botframework-webchat: React chat component greedy focus

[craigomatic]

Edited by @compulim for sectioning and add fix notes

Background

I have a vertically scrolling page where the chat component is placed inline, at the bottom of the page below the fold, like this:

====================
menu, text, image, etc

--------------fold--------------
more text

<Chat />

====================

When the page loads in both Edge and Chrome, focus is placed on the chat input box and the page jumps immediately to the bottom of the view.

This behavior makes perfect sense for a more conventional popup overlay where it should be greedy and grab focus.

I've attached a sample that repros the issue, it's a basic app created using create-react-app my-app --scripts-version=react-scripts-ts that has some text and the Chat control. Just needs a directline key.

react-component-forces-focus.zip

Would it make sense to add a prop to the component to optionally disable the setfocus on render?

Note to fixer

Note this fix is only for v3, not v4.

• Add options to disable greedy focus (name the props autoFocus, default to true if undefined)
  
  
  
  • Could be related to this autoFocus attribute in Shell.tsx
  
  
  • Could be related to more code, please investigate
  
  
• Verify the autoFocus props works as expected by building a test page to host Web Chat v3
  
  
  
  • For <BotChat autoFocus={ true }> and <BotChat>
    
    
    
    
    
    • Add an <input> to the top of the page, when the page load, it should focus inside Web Chat
    
    
    
  
  
  • For <BotChat autoFocus={ false }>,
    
    
    
    
    
    • Add <input>, it should not be focus (browser may put focus on it if you press F5, make sure you do a page nav instead of F5)
    
    
    
    • Add <input autoFocus>, it should be focused on load
    
    
    
  
  

[billba]

Yeah, that's a good idea. I think 95% of our testing is in full-page mode and we don't sufficiently take into account the differences when WebChat is an embedded in a page.

[compulim]

Our plan: don't focus on textbox when the chat window is inserted. We will provide an API to set the focus on whenever the page owner think it's ready.

[billba]

I think this property should actually default to true, because that preserves current behavior, which other applications might depend on. However the very existence of a setFocus callback would be cue enough to start WebChat without setting the focus.

[SamuelTassell]

Any update on this? Is there a workaround for now?

[corinagum]

Greedy focus has been removed in v4.
In v3, we put the focus on Web Chat sendbox whenever we load. This could conflict with the user's preferences.

[compulim]

Fixed in #1698. To prevent greedy focus, add autoFocus props and set it to false.