microsoft / microsoft/BotFramework-WebChat

Auto scroll broken with autoScrollSnapOnPage on Android devices

Open
#4,402 1 comment 3 reactions 1 assignee View on GitHub

@compulim is already working on this.

Since Sep 6, 2022.

Bot Services bug customer-reported ExemptFromDailyDRIReport
Dominant language
HTML
Stars
1.8k
Forks
1.6k
Avg merge
22h 58m
Merged PRs (30d)
2

Description

Is it an issue related to Adaptive Cards?
  • Yes, this is an Adaptive Card issue but it is specific to Web Chat.
Do you have any screenshots?

No

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

NPM

Which hosting environment does this issue primarily affect?

Web apps

Which browsers and platforms do the issue happened?

Browser: Chrome (latest), Platform: Android

Which area does this issue affect?

Chat history

Is this an accessibility issue?
  • Yes, this is an accessibility issue.
Please describe the bug

Auto scrolling the transcript is broken on Android devices running the Chrome browser with the autoScrollSnapOnPage style option set to true.

Do you see any errors in console log?

Uncaught TypeError: Cannot read properties of null (reading 'offsetTop')
at BasicTranscript.js:817:1
at Composer.js:309:1
at Composer.js:477:1

How to reproduce the issue?
  1. Start WebChat with styleOptions using { autoScrollSnapOnPage: true }
  2. Open WebChat using the Chrome browser on an android device
  3. Type a message that will receive a response
What is the expected and actual behavior?

Expected:
Chat transcript scrolls down when an incoming message is received.

Actual:
Chat transcript does not scroll down to reveal the received message.

Adaptive Card JSON

No response

Additional context

Transcript activity snapping uses the class from the active descendant element to calculate scroll offset:
https://github.com/microsoft/BotFramework-WebChat/blob/v4.15.3/packages/component/src/BasicTranscript.tsx#L841

On Android devices the active descendent is not rendered because of an Android TalkBack bug workaround:
https://github.com/microsoft/BotFramework-WebChat/blob/v4.15.3/packages/component/src/Transcript/ActivityRow.tsx#L79

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.