Skip to content

Commit

Permalink
fix: rewrite onTextChanged to onSelectionChanged event handler in…
Browse files Browse the repository at this point in the history
… `KeyboardAwareScrollView`
  • Loading branch information
kirillzyusko committed Oct 23, 2024
1 parent 6eb74d2 commit 8783c80
Show file tree
Hide file tree
Showing 10 changed files with 22 additions and 19 deletions.
Binary file modified e2e/kit/assets/ios/iPhone 14 Pro/AwareScrollViewFirstInputGrown.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/kit/assets/ios/iPhone 14 Pro/AwareScrollViewKeyboardClosed.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/kit/assets/ios/iPhone 14 Pro/AwareScrollViewTextChanged.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/kit/assets/ios/iPhone 14/AwareScrollViewFirstInputGrown.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/kit/assets/ios/iPhone 14/AwareScrollViewKeyboardClosed.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/kit/assets/ios/iPhone 14/AwareScrollViewTextChanged.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/kit/assets/ios/iPhone 15 Pro/AwareScrollViewFirstInputGrown.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/kit/assets/ios/iPhone 15 Pro/AwareScrollViewKeyboardClosed.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified e2e/kit/assets/ios/iPhone 15 Pro/AwareScrollViewTextChanged.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 22 additions & 19 deletions src/components/KeyboardAwareScrollView/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ const KeyboardAwareScrollView = forwardRef<
);

const scrollFromCurrentPosition = useCallback(
(customHeight?: number) => {
(customHeight: number) => {
"worklet";

const prevScrollPosition = scrollPosition.value;
Expand All @@ -207,7 +207,7 @@ const KeyboardAwareScrollView = forwardRef<
...input.value,
layout: {
...input.value.layout,
height: customHeight ?? input.value.layout.height,
height: customHeight ?? input.value.layout.height, // TODO: math.min? When we have multiline input with limited amount of lines, then custom height can be very big?
},
};
scrollPosition.value = position.value;
Expand All @@ -217,39 +217,42 @@ const KeyboardAwareScrollView = forwardRef<
},
[maybeScroll],
);
const onChangeText = useCallback(() => {
"worklet";
const onChangeText = useCallback(
(customHeight: number) => {
"worklet";

// if typing a text caused layout shift, then we need to ignore this handler
// because this event will be handled in `useAnimatedReaction` below
if (layout.value?.layout.height !== input.value?.layout.height) {
return;
}
// if typing a text caused layout shift, then we need to ignore this handler
// because this event will be handled in `useAnimatedReaction` below
if (layout.value?.layout.height !== input.value?.layout.height) {
return;
}

scrollFromCurrentPosition();
}, [scrollFromCurrentPosition]);
scrollFromCurrentPosition(customHeight);
},
[scrollFromCurrentPosition],
);
const onChangeTextHandler = useMemo(
() => debounce(onChangeText, 200),
[onChangeText],
);
const onSelectionChange = useCallback(
(e: FocusedInputSelectionChangedEvent) => {
"worklet";

if (e.selection.start.position !== e.selection.end.position) {
scrollFromCurrentPosition(e.selection.end.y);
}
},
[scrollFromCurrentPosition],
);

const onChangeTextHandler = useMemo(
() => debounce(onChangeText, 200),
[onChangeText],
onChangeTextHandler(e.selection.end.y);
},
[scrollFromCurrentPosition, onChangeTextHandler],
);

useFocusedInputHandler(
{
onChangeText: onChangeTextHandler,
onSelectionChange: onSelectionChange,
},
[onChangeTextHandler, onSelectionChange],
[onSelectionChange],
);

useSmoothKeyboardHandler(
Expand Down

0 comments on commit 8783c80

Please sign in to comment.