Botframework-webchat: Inconsistant behaviour when submitting question while bottom of chat not visible.

[gsoper78]

Version

4.7.1 CDN IE11 compatible version

Describe the bug

Submitting a question by typing enter / return while the bottom of the chat is not visible causes the chat to scroll to the bottom of the chat and the new answer. Submitting a question by pressnig the submit icon while the bottom of the chat is not visible does not causes the chat to scroll to the bottom of the chat and the new answer is not visible. In my opinion, the former behaviour is preferable.

Steps to reproduce

Ask enough questions to ensure that the chat pane is scrollable.
Scroll up so that the latest answer isn't visible.
Submit a question by pressing the enter / return button.
Observe that the chat pane automatically scrolls down, thus making the new answer visible.
Scroll up again so that the latest answer isn't visible.
Submit another question, this time by clicking the submit icon.
Observe that the chat pane does not automatically scroll down and the new answer is not visible.

Expected behavior

The two methods of submitting a question should result in a consistant response, preferably scrolling automatically to show the resultant answer.

[tdurnford]

@gsoper78 You are correct - the behavior between pressing the send button and using the enter key to send activities to the bot is inconsistent, and I agree that both should scroll the transcript to the bottom of the conversation. To align the differing behaviors, the SendButton should use the useTextBoxSubmit hook which sends the message to the bot, scrolls the conversation to the end, and focuses the send box. @compulim @corinagum Thoughts?

Submit send box with send button (does not scroll to bottom)

Submit send box with enter key (scrolls to bottom)

Necessary Code Changes

import React from 'react';

import connectToWebChat from '../connectToWebChat';
import IconButton from './IconButton';
import SendIcon from './Assets/SendIcon';
import useDisabled from '../hooks/useDisabled';
import useLocalizer from '../hooks/useLocalizer';
- import useSubmitSendBox from '../hooks/useSubmitSendBox';
+ import { useTextBoxSubmit } from '../TextBox';

...

const SendButton = () => {
  const [disabled] = useDisabled();
  const localize = useLocalizer();
- const submitSendBox = useSubmitSendBox();
+ const submitSendBox = useTextBoxSubmit();

  return (
    <IconButton alt={localize('TEXT_INPUT_SEND_BUTTON_ALT')} disabled={disabled} onClick={submitSendBox}>
      <SendIcon />
    </IconButton>
  );
};

Additional Context

• Fixer should keep https://github.com/microsoft/BotFramework-WebChat/issues/2850 in mind

[corinagum]

I would just want to make sure this change is tested on both mobile OS's. We've made changes in the past related to the sendbox/submit actions for mobile but don't have the ability to test the behavior right now.

Both submitting via send button and return should have behavior where (if the keyboard is closed), the keyboard either opens in an understandable way or doesn't open. We don't want the keyboard to flash open then closed, or open when the user is not expecting it.

Should we consolidate these issues? They should probably be addressed at the same time.

[stevengum]

@tdurnford any updates?

[tdurnford]

@stevengum We're planning to address this issue in R9

[compulim]

This one should already be done recently on accessibility push.

Need to verify all behaviors mentioned are delivered.

[tdurnford]

The scroll behaviors for submitting the send box by pressing enter and clicking the send button both scroll the scroll the transcript to the bottom in the latest version of Web Chat - v4.9.1.