BotFramework-WebChat
BotFramework-WebChat copied to clipboard
microsoft
Scrolling behaviour: Chatbot doesn't scroll to the new message when sending Adaptive Cards
Screenshots
Version
latest(current version: 4.13.0)
Describe the bug
When an adaptive card follows another adaptive card after submitting the first one, the chatbot doesn't scroll to the second adaptive card.
This happens only when the option autoScrollSnapOnActivity is set to true.
Steps to reproduce
- create a backend, which sends an adaptive card after submitting another adaptive card.
- use this frontend - example (with your token):
<!DOCTYPE html>
<html>
<head>
<script crossorigin="anonymous" src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
}
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
const store = window.WebChat.createStore({}, ({ dispatch }) => next => action => {
if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
dispatch({
type: 'WEB_CHAT/SEND_EVENT',
payload: {
name: 'webchat/join',
value: { language: window.navigator.language }
}
});
}
return next(action);
});
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: 'INSERT_TOKEN_HERE'
}),
userID: 'YOUR_USER_ID',
username: 'Web Chat User',
locale: 'de-de',
store,
styleOptions: {
bubbleBackground: 'rgba(0, 255, 255, .1)',
autoScrollSnapOnActivity: true,
}
},
document.getElementById('webchat')
);
</script>
</body>
</html>
- open the chatbot
- Start the dialog with the adaptive cards and submit the first adaptive card
Expected behavior
The chatbot should scroll to the second adaptive card, after submitting the first one.
Additional context
We tried a workaround to disable the autoScrollSnapOnActivity - property when an adaptive card is about the get rendered. But this causes another problem.
@MatthiasGwiozda For this behavior, I think this is intended due to accessibility - after pressing the button in the card, the focus remains on the clicked button, and therefore there should be no scroll to the bottom.
If you could try this out - Please press the Adaptive Card button, then use TAB to move focus within the transcript. The focus should move FROM the pressed button to the next item in the DOM.
A potential workaround for this, if scrolling to the bottom is absolutely necessary, would be to add a SCROLL_TO_BOTTOM after a button press. However, for a11y reasons, this wouldn't be recommended. If you decide to go this route, you may also consider changing focus to the sendbox, but again would violate accessibility guidelines.
@compulim could you confirm my assumptions above?
@MatthiasGwiozda
@tdurnford while your solution works, it has some flaws:
When using adaptive - cards with input - fields, the user - inputs gets deleted in the moment when we update the styleOptions (In this case we update the styleOptions exactly in the moment when the adaptive - card was submitted):
I guess this happens because the webchat gets re-rendered.
Regarding your comment in 2383, could you share your code modifications that instantiate this behavior?
I think we should try to repro and see. The main part I am seeing:
styleOptions.autoScrollSnapOnActivityis set totrue- First AC shows up, with a card action button
- Click on a button on the AC will trigger a postback
- The bot receiving the postback will send another AC with a relatively long form
@MatthiasGwiozda if the button on the Adaptive Card send an "IMBack" instead of "PostBack", will it help?
@MatthiasGwiozda if the button on the Adaptive Card send an "IMBack" instead of "PostBack", will it help?
This won't be an option in our dialog - flow. We have to save the data that comes from the adaptive - card. With an imBack - Button this is not possible.
Thats why we use Action.Submit in the adaptive card.
