[bugfix] Update storybook and samples to disable mobile feature "pull-down to refresh"#2619
Merged
edwardlee-msft merged 4 commits intomainfrom Jan 3, 2023
Merged
Conversation
edwardlee-msft
requested review from
JamesBurnside,
PorterNan,
alkwa-msft,
anjulgarg,
carocao-msft,
dmceachernmsft,
mgamis-msft and
prabhjot-msft
as code owners
Contributor
CallWithChat bundle size is increased❗.
|
Contributor
Chat bundle size is increased❗.
|
Contributor
Calling bundle size is decreased✅.
|
Contributor
Contributor
| // Disables pull down to refresh. Prevents accidental page refresh when scrolling through chat messages | ||
| // Another alternative: set body style touch-action to 'none'. Achieves same result. | ||
| useEffect(() => { | ||
| document.body.style.overflow = 'hidden'; |
Member
There was a problem hiding this comment.
does this disable pulldown behavior because there is no overflow on the page?
Contributor
Author
There was a problem hiding this comment.
Yes, essentially on safari ios there is no explicit option to disable pull down to refresh.
The intermediate solution is to either apply a
overflow: 'hidden' or a touch-action: 'hidden' to the body element to prevent a pull-down from occurring at all.
Contributor
Author
There was a problem hiding this comment.
I did not apply this fix to the composites and have only applied the fix to the samples as this can 100% affect Contosos use cases if integrated as a modal, iframe, etc..
I added instructions into storybook for best practices for mobile.
dmceachernmsft
approved these changes
Dec 30, 2022
JamesBurnside
approved these changes
Jan 3, 2023
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Disable pull-down to refresh on samples and document best practice in storybook on how to handle accidental pull down to refresh triggers on mobile
Why
On IOS Safari Chat and CallWithChat scrolling on chat page can sometimes cause the whole page view to refresh/scroll.
This can cause accidental page refresh.
https://skype.visualstudio.com/SPOOL/_workitems/edit/3069029
How Tested
Tested on iPhone SE on CallWIthChat and Chat sample.
Process & policy checklist
Is this a breaking change?