fix: rewrite onTextChanged to onSelectionChanged event handler in KeyboardAwareScrollView (#546)

## 📜 Description

Rewrite `onTextChanged` to `onSelectionChanged` event handler in
`KeyboardAwareScrollView`.

## 💡 Motivation and Context

This is the first PR that re-writes `KeyboardAwareScrollView` handlers
to `onSelectionChanged` as a main driver.

The current problem with `onTextChanged`/`onLayoutChanged` events is
that we don't know the coordinates of the caret, and in certain cases
(if view is full screen height) it may lead to unpredictable changes.

So in this PR I remove `onTextChanged` handler and replace it with
`onSelectionChanged`. I fixed e2e tests and overall have a confidence
about these changes 😊

## 📢 Changelog

<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->

### E2E

- update assets;
- update selection code to make it more robust;

### JS

- use `onSelectionChanged` instead of `onTextChanged`;

## 🤔 How Has This Been Tested?

Tested in e2e tests.

## 📸 Screenshots (if appropriate):

|Before|After|
|-------|-----|

|![image](https://github.com/user-attachments/assets/d5cc152f-4e2d-42d3-a93e-a60891a2bec6)|![image](https://github.com/user-attachments/assets/4fb89683-496b-4174-8b98-4aba8a04a3bd)|

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed

Author: kirillzyusko

e2e/kit/004-aware-scroll-view.e2e.ts

@@ -2,6 +2,7 @@ import { expectBitmapsToBeEqual } from "./asserts";
 import {
   Env,
   scrollUpUntilElementIsBarelyVisible,
+  selectText,
   tap,
   typeText,
   waitAndReplace,
@@ -78,7 +79,7 @@ describe("AwareScrollView test cases", () => {
       "aware_scroll_view_container",
       "TextInput#4",
     );
-    await element(by.id("TextInput#4")).multiTap(2);
+    await selectText("TextInput#4");
     await waitForExpect(async () => {
       await expectBitmapsToBeEqual(
         "AwareScrollViewTextSelectionChanged",
@@ -89,7 +90,7 @@ describe("AwareScrollView test cases", () => {
   });
 
   it("should auto-scroll when user types a text", async () => {
-    await element(by.id("aware_scroll_view_container")).scroll(80, "up");
+    await element(by.id("aware_scroll_view_container")).scroll(40, "up");
     await typeText("TextInput#4", "1");
     await waitForExpect(async () => {
       await expectBitmapsToBeEqual(

e2e/kit/assets/android/e2e_emulator_28/AwareScrollViewTextChanged.png

@@ -145,12 +145,27 @@ export const scrollUpUntilElementIsBarelyVisible = async (
         await element(by.id(elementId)).tap({ x: 0, y: 25 });
       }
     } catch (e) {
-      await element(by.id(scrollViewId)).scroll(35, "down", 0.01, 0.5);
+      await element(by.id(scrollViewId)).scroll(50, "down", 0.01, 0.5);
       break;
     }
   }
 };
 
+export const selectText = async (id: string) => {
+  console.debug(
+    "---------------------------------\n",
+    "Select text with id:",
+    colors.magenta(id),
+  );
+
+  if (device.getPlatform() === "ios") {
+    // on Android multiTap sometimes may not work properly
+    await element(by.id(id)).multiTap(2);
+  } else {
+    await element(by.id(id)).longPress();
+  }
+};
+
 export const closeKeyboard = async (textInputId: string) => {
   if (device.getPlatform() === "android") {
     await device.pressBack();

e2e/kit/assets/android/e2e_emulator_31/AwareScrollViewTextChanged.png

@@ -1,5 +1,6 @@
 import React, { forwardRef, useCallback, useEffect, useMemo } from "react";
 import Reanimated, {
+  clamp,
   interpolate,
   runOnUI,
   scrollTo,
@@ -127,6 +128,8 @@ const KeyboardAwareScrollView = forwardRef<
     const scrollBeforeKeyboardMovement = useSharedValue(0);
     const { input } = useReanimatedFocusedInput();
     const layout = useSharedValue<FocusedInputLayoutChangedEvent | null>(null);
+    const lastSelection =
+      useSharedValue<FocusedInputSelectionChangedEvent | null>(null);
 
     const { height } = useWindowDimensions();
 
@@ -223,7 +226,7 @@ const KeyboardAwareScrollView = forwardRef<
     );
 
     const scrollFromCurrentPosition = useCallback(
-      (customHeight?: number) => {
+      (customHeight: number) => {
         "worklet";
 
         const prevScrollPosition = scrollPosition.value;
@@ -238,7 +241,9 @@ const KeyboardAwareScrollView = forwardRef<
           ...input.value,
           layout: {
             ...input.value.layout,
-            height: customHeight ?? input.value.layout.height,
+            // when we have multiline input with limited amount of lines, then custom height can be very big
+            // so we clamp it to max input height
+            height: clamp(customHeight, 0, input.value.layout.height),
           },
         };
         scrollPosition.value = position.value;
@@ -248,39 +253,51 @@ const KeyboardAwareScrollView = forwardRef<
       },
       [maybeScroll],
     );
-    const onChangeText = useCallback(() => {
-      "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;
-      }
-
-      scrollFromCurrentPosition();
-    }, [scrollFromCurrentPosition]);
-    const onSelectionChange = useCallback(
-      (e: FocusedInputSelectionChangedEvent) => {
+    const onChangeText = useCallback(
+      (customHeight: number) => {
         "worklet";
 
-        if (e.selection.start.position !== e.selection.end.position) {
-          scrollFromCurrentPosition(e.selection.end.y);
+        // 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(customHeight);
       },
       [scrollFromCurrentPosition],
     );
-
     const onChangeTextHandler = useMemo(
       () => debounce(onChangeText, 200),
       [onChangeText],
     );
+    const onSelectionChange = useCallback(
+      (e: FocusedInputSelectionChangedEvent) => {
+        "worklet";
+
+        const lastTarget = lastSelection.value?.target;
+
+        lastSelection.value = e;
+
+        if (e.target !== lastTarget) {
+          // ignore this event, because "focus changed" event handled in `useSmoothKeyboardHandler`
+          return;
+        }
+
+        if (e.selection.start.position !== e.selection.end.position) {
+          return scrollFromCurrentPosition(e.selection.end.y);
+        }
+
+        onChangeTextHandler(e.selection.end.y);
+      },
+      [scrollFromCurrentPosition, onChangeTextHandler],
+    );
 
     useFocusedInputHandler(
       {
-        onChangeText: onChangeTextHandler,
         onSelectionChange: onSelectionChange,
       },
-      [onChangeTextHandler, onSelectionChange],
+      [onSelectionChange],
     );
 
     useSmoothKeyboardHandler(