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.

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

KeyboardAwareScrollView is not reacting on text selection #420

Open
kirillzyusko opened this issue Apr 23, 2024 · 0 comments
Open

KeyboardAwareScrollView is not reacting on text selection #420

kirillzyusko opened this issue Apr 23, 2024 · 0 comments
Assignees
Labels
🐛 bug Something isn't working 📚 components Anything related to the exported components of this library

Comments

@kirillzyusko
Copy link
Owner

Describe the bug

If your multiline input is partially covered by the keyboard and you select text inside this input, then selection can go under the keyboard and you will not understand what you are selecting.

Code snippet

KeyboardAwareScrollView example.

Repo for reproducing

Can be reproduced in example app.

To Reproduce
Steps to reproduce the behavior:

  1. Go to KeyboardAwareScrollView example
  2. Click on TextInput#5
  3. Type 10 lines of text
  4. Scroll down, to make visible only one line of the text
  5. Try to select an entire text

Expected behavior

On web for example we have following behavior:

telegram-cloud-document-2-5278611512267656175.mp4

Screenshots

iOS Android
RPReplay_Final1713889263.MP4
telegram-cloud-document-2-5278611512267656144.mp4

Smartphone (please complete the following information):

  • Desktop OS: macOS 14.4.1
  • Device: iPhone 11 (iOS 17.4)/Pixel 7 Pro (Android 14)
  • OS: see above
  • RN version: 0.73.6
  • RN architecture: old/new
  • JS engine: Hermes
  • Library version: 1.11.6

Additional context

I think this library should expose additional handler in useFocusedInputHandler:

useFocusedInputHandler({
  onSelectionChange: (e) => {
    "worklet";
  }
});

That will be fired whenever position of the carret will be changed. Also probably we'll need to include x/y coordinates for first and last carret.

@kirillzyusko kirillzyusko added 🐛 bug Something isn't working 📚 components Anything related to the exported components of this library labels Apr 23, 2024
@kirillzyusko kirillzyusko self-assigned this Apr 23, 2024
kirillzyusko added a commit that referenced this issue May 8, 2024
## 📜 Description

Added a new `onSelectionChange` handler for `useFocusedInputHandler`
hook.

## 💡 Motivation and Context

These changes will be a findamental work for resolving
#420

To get `onSelectionChange` events I had to intercept them:
- on iOS it's possible on a delegate level (since default delegate
forwards all events to JS I had to carefully intercept all events and
forward them to original delegate - that's why I create
`KCTextInputCompositeDelegate` (KC stands for `KeyboardController`);
- on Android I can inject my own handler, but turned out that on Fabric
hanlder is re-created on each symbol typing, so my handler gets
overwritten by handler from props - that's why I added `FrameScheduler`
class and went with "long pooling" approach (later on I plan to add
`addSelectionListener` method to RN core);

Last but not least - interaction with the proxy-delegate will give us an
ability to intercept more events, so we may get rid off patch for
`react-native-text-input-mask` and get events directly from the
delegate.

## 📢 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 -->

### Docs

- added a reference about new handler and its use cases;

### E2E

- updated e2e test suite (covered new functionality);

### JS

- added new event tye declaration;
- added new internal hook (`useFocusedInputSelectionHandler`);
- added new unit tests;
- updated fabric specs;
- update example app;
- updated `cspell` config;

### iOS

- added `KCTextInputCompositeDelegate`;
- added `setForceDelegate` extension for `RCTUITextView`;
- added new event;

### Android

- added `FrameScheduler` class;
- added extension for observing selection changes;
- added new event;

## 🤔 How Has This Been Tested?

Tested on:
- Pixel 7 Pro (Android 14, real device);
- Pixel 3A (Androd 13, emulator);
- iPhone 15 Pro (simulator, iOS 17.4);
- iPhone 11 (iOS 17.4.1, real devcie).

## 📸 Screenshots (if appropriate):

<img
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/afade354-1823-48fc-9705-a0fd3c7eac4b"
height="600">

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working 📚 components Anything related to the exported components of this library
Projects
None yet
Development

No branches or pull requests

1 participant