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

Fix chat list isn't scrolled to bottom when edit message using arrow up key #52090

Merged
merged 6 commits into from
Nov 13, 2024
Merged

Fix chat list isn't scrolled to bottom when edit message using arrow up key #52090

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
48fd330
fix flatlist isn't scrolled when message changes to edit composer
bernhardoj Nov 6, 2024
2153525
prettier
bernhardoj Nov 6, 2024
e391786
lint
bernhardoj Nov 6, 2024
1d5bde0
Merge branch 'main' into fix/51431-list-isn't-scrolled-to-bottom-when…
bernhardoj Nov 12, 2024
0bf59fb
check if the children has composer or not instead
bernhardoj Nov 12, 2024
3be82d5
remove log
bernhardoj Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 30 additions & 20 deletions src/components/FlatList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,28 +109,31 @@ function MVCPFlatList<TItem>({maintainVisibleContentPosition, horizontal = false
}
}, [getContentView, getScrollOffset, mvcpMinIndexForVisible, horizontal]);

const adjustForMaintainVisibleContentPosition = useCallback(() => {
if (mvcpMinIndexForVisible == null) {
return;
}
const adjustForMaintainVisibleContentPosition = useCallback(
(animated = true) => {
if (mvcpMinIndexForVisible == null) {
return;
}

const firstVisibleView = firstVisibleViewRef.current;
const prevFirstVisibleOffset = prevFirstVisibleOffsetRef.current;
if (firstVisibleView == null || !firstVisibleView.isConnected || prevFirstVisibleOffset == null) {
return;
}
const firstVisibleView = firstVisibleViewRef.current;
const prevFirstVisibleOffset = prevFirstVisibleOffsetRef.current;
if (firstVisibleView == null || !firstVisibleView.isConnected || prevFirstVisibleOffset == null) {
return;
}

const firstVisibleViewOffset = horizontal ? firstVisibleView.offsetLeft : firstVisibleView.offsetTop;
const delta = firstVisibleViewOffset - prevFirstVisibleOffset;
if (Math.abs(delta) > (IS_MOBILE_SAFARI ? 100 : 0.5)) {
const scrollOffset = lastScrollOffsetRef.current;
prevFirstVisibleOffsetRef.current = firstVisibleViewOffset;
scrollToOffset(scrollOffset + delta, false, true);
if (mvcpAutoscrollToTopThresholdRef.current != null && scrollOffset <= mvcpAutoscrollToTopThresholdRef.current) {
scrollToOffset(0, true, false);
const firstVisibleViewOffset = horizontal ? firstVisibleView.offsetLeft : firstVisibleView.offsetTop;
const delta = firstVisibleViewOffset - prevFirstVisibleOffset;
if (Math.abs(delta) > (IS_MOBILE_SAFARI ? 100 : 0.5)) {
const scrollOffset = lastScrollOffsetRef.current;
prevFirstVisibleOffsetRef.current = firstVisibleViewOffset;
scrollToOffset(scrollOffset + delta, false, true);
if (mvcpAutoscrollToTopThresholdRef.current != null && scrollOffset <= mvcpAutoscrollToTopThresholdRef.current) {
scrollToOffset(0, animated, false);
}
}
}
}, [scrollToOffset, mvcpMinIndexForVisible, horizontal]);
},
[scrollToOffset, mvcpMinIndexForVisible, horizontal],
);

const setupMutationObserver = useCallback(() => {
const contentView = getContentView();
Expand All @@ -141,6 +144,7 @@ function MVCPFlatList<TItem>({maintainVisibleContentPosition, horizontal = false
mutationObserverRef.current?.disconnect();

const mutationObserver = new MutationObserver((mutations) => {
let isEditComposerAdded = false;
// Check if the first visible view is removed and re-calculate it
// if needed.
mutations.forEach((mutation) => {
Expand All @@ -150,6 +154,12 @@ function MVCPFlatList<TItem>({maintainVisibleContentPosition, horizontal = false
}
firstVisibleViewRef.current = null;
});
mutation.addedNodes.forEach((node) => {
if (node.nodeType !== Node.ELEMENT_NODE || !(node as HTMLElement).querySelector('#composer')) {
return;
}
isEditComposerAdded = true;
});
});

if (firstVisibleViewRef.current == null) {
Expand All @@ -162,7 +172,7 @@ function MVCPFlatList<TItem>({maintainVisibleContentPosition, horizontal = false
return;
}

adjustForMaintainVisibleContentPosition();
adjustForMaintainVisibleContentPosition(!isEditComposerAdded);
prepareForMaintainVisibleContentPosition();
});
mutationObserver.observe(contentView, {
Expand Down
Loading