Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Scrolling behaviour: Chatbot doesn't scroll to the new message when sending Adaptive Cards #3857

Open
MatthiasGwiozda opened this issue Apr 19, 2021 · 7 comments
Open

Scrolling behaviour: Chatbot doesn't scroll to the new message when sending Adaptive Cards #3857

MatthiasGwiozda opened this issue Apr 19, 2021 · 7 comments
Assignees
@compulim
Labels
Bot Services Required for internal Azure reporting. Do not delete. Do not change color. bug Indicates an unexpected problem or an unintended behavior. customer-replied-to Required for internal reporting. Do not delete. customer-reported Required for internal Azure reporting. Do not delete. ExemptFromDailyDRIReport exempt from daily DRI report

Comments

@MatthiasGwiozda
Copy link

Screenshots

Adaptive Card Scrolling

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

  1. create a backend, which sends an adaptive card after submitting another adaptive card.
  2. 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>
  1. open the chatbot
  2. 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 MatthiasGwiozda added Bot Services Required for internal Azure reporting. Do not delete. Do not change color. bug Indicates an unexpected problem or an unintended behavior. customer-reported Required for internal Azure reporting. Do not delete. labels Apr 19, 2021
@corinagum
Copy link
Contributor

corinagum commented Apr 19, 2021 •
edited
Loading

@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.

Following button activation, the focus is set depending on the type of action the button performs. For example, if clicking the button opens a dialog, the focus should move to the dialog. If the button closes a dialog, the focus should return to the button that opened the dialog unless the function performed in the dialog context logically leads to a different element. If the button alters the current context, then focus typically remains on the button, such as muting and unmuting an audio file.

@compulim could you confirm my assumptions above?

@corinagum corinagum added the customer-replied-to Required for internal reporting. Do not delete. label Apr 19, 2021
@corinagum corinagum self-assigned this Apr 19, 2021
@corinagum
Copy link
Contributor

@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):

adaptive - card - bug

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?

@compulim
Copy link
Contributor

I think we should try to repro and see. The main part I am seeing:

  • styleOptions.autoScrollSnapOnActivity is set to true
  • 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

@compulim
Copy link
Contributor

@MatthiasGwiozda if the button on the Adaptive Card send an "IMBack" instead of "PostBack", will it help?

@MatthiasGwiozda
Copy link
Author

@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.
image

@corinagum corinagum removed their assignment Apr 20, 2021
@corinagum
Copy link
Contributor

I've added this to R14 candidates. Thanks again for reporting.

@corinagum corinagum added this to the R14 milestone Apr 26, 2021
@tsuwandy tsuwandy added the ExemptFromDailyDRIReport exempt from daily DRI report label May 7, 2021
@compulim compulim modified the milestones: R14, R15 Jun 16, 2021
@compulim compulim removed this from the R15 milestone Jun 29, 2021
@Sandy2725
Copy link

Hi @compulim ,

Any update on #3857. can you please respond.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@compulim compulim

Labels
Bot Services Required for internal Azure reporting. Do not delete. Do not change color. bug Indicates an unexpected problem or an unintended behavior. customer-replied-to Required for internal reporting. Do not delete. customer-reported Required for internal Azure reporting. Do not delete. ExemptFromDailyDRIReport exempt from daily DRI report
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@compulim @tsuwandy @corinagum @MatthiasGwiozda @Sandy2725