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

TextInput handles don't reflect selectionColor on Android #41004

Closed
szmarczak opened this issue Oct 16, 2023 · 7 comments
Closed

TextInput handles don't reflect selectionColor on Android #41004

szmarczak opened this issue Oct 16, 2023 · 7 comments
Labels
Component: TextInput Related to the TextInput component. Needs: Triage 🔍 Newer Patch Available Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@szmarczak
Copy link

Description

The handles are cyan but should be red.

React Native Version

0.72.5

Output of npx react-native info

>npx react-native info
info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.22621
  CPU: "(12) x64 AMD Ryzen 5 5600 6-Core Processor              "
  Memory: 14.86 GB / 31.91 GB
Binaries:
  Node:
    version: 20.2.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 9.7.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.5.33424.131 (Visual Studio Community 2022)
Languages:
  Java:
    version: 11.0.20.1
    path: C:\Program Files\Eclipse Adoptium\jdk-11.0.20.101-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.5
    wanted: 0.72.5
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

Link below. Run on Android.

Snack, screenshot, or link to a repository

https://snack.expo.dev/@szmarczak/smart-blue-bubblegum

@github-actions
Copy link

⚠️ Newer Version of React Native is Available!
ℹ️ You are on a supported minor version, but it looks like there's a newer patch available - 0.72.6. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

@github-actions github-actions bot added Component: TextInput Related to the TextInput component. Platform: Android Android applications. labels Oct 16, 2023
@frankcalise
Copy link
Collaborator

Hey thanks for the report - is this a regression since a certain version do you know? Or has it always been like this?

@szmarczak
Copy link
Author

I'm quite new to React Native and this is the first time I'm using TextInput, however this seems to be a regression: #30283

@jakex7
Copy link
Contributor

jakex7 commented Oct 19, 2023

Hi, I have found a solution to this problem on the native side and would like to create a PR. However, I am wondering if selectionColor/cursorColor is the right place to set handles color.

The current behavior is that if the API level is below 28 handles color is set along with cursorColor.

There are three possible solutions to this problem:

  1. create a new prop called selectionHandlesColor, which would contain the carried over logic from the API before 28 and a new one that will work in newer versions.
  2. adding new logic to cursorColor to continue the behavior as it is currently on older versions of Android
  3. migrate this to selectionColor

Let me know what you think about this and which solution would be better @szmarczak @frankcalise

@szmarczak
Copy link
Author

I've got Android 13 and it doesn't work regardless if I use selectionColor or cursorColor.

I think it would be best to create a new attribute like you mentioned - selectionHandlesColor. If it's undefined, then the handles use selectionColor. Otherwise, use the new value.

facebook-github-bot pushed a commit that referenced this issue Nov 23, 2023
Summary:
This PR addresses the problem raised in the #41004 issue.

The current logic is that `selectionColor` on iOS sets the color of the selection, handles, and cursor. On Android it looks similar, while it doesn't change the color of the handles if the API level is higher than 27. In addition, on Android there was an option to set the color of the cursor by `cursorColor` prop, but it didn't work if the `selectionCursor` was set.

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[GENERAL] [ADDED] - Make same behavior of the `selectionColor` prop on Android as iOS
[ANDROID] [ADDED] - Introduced `selectionHandleColor` as a separate prop
[ANDROID] [CHANGED] - Allowing `cursorColor` and `selectionHandleColor` to override `selectionColor` on Android

Pull Request resolved: #41092

Test Plan:
Manual tests in rn-tester:

### `selectionColor` same as iOS, sets selection, handles and cursor color

_There is a way to set only "rectangle" color by setting other props as null_

![image](https://github.com/facebook/react-native/assets/39670088/9cba34c2-c9fc-4d84-a9cb-3b28a754671d)

### `selectionHandleColor`

![image](https://github.com/facebook/react-native/assets/39670088/8a7e488e-0e35-4646-9efe-4783420b41fa)

### `cursorColor`

![image](https://github.com/facebook/react-native/assets/39670088/06798b8a-851f-44c7-979e-a4e74681b29a)

Reviewed By: NickGerleman

Differential Revision: D51253298

Pulled By: javache

fbshipit-source-id: 290284aa38c6ba0aa6998b937258788ce6376431
Othinn pushed a commit to Othinn/react-native that referenced this issue Jan 9, 2024
Summary:
This PR addresses the problem raised in the facebook#41004 issue.

The current logic is that `selectionColor` on iOS sets the color of the selection, handles, and cursor. On Android it looks similar, while it doesn't change the color of the handles if the API level is higher than 27. In addition, on Android there was an option to set the color of the cursor by `cursorColor` prop, but it didn't work if the `selectionCursor` was set.

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

Pick one each for the category and type tags:

[ANDROID|GENERAL|IOS|INTERNAL] [BREAKING|ADDED|CHANGED|DEPRECATED|REMOVED|FIXED|SECURITY] - Message

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests
-->

[GENERAL] [ADDED] - Make same behavior of the `selectionColor` prop on Android as iOS
[ANDROID] [ADDED] - Introduced `selectionHandleColor` as a separate prop
[ANDROID] [CHANGED] - Allowing `cursorColor` and `selectionHandleColor` to override `selectionColor` on Android

Pull Request resolved: facebook#41092

Test Plan:
Manual tests in rn-tester:

### `selectionColor` same as iOS, sets selection, handles and cursor color

_There is a way to set only "rectangle" color by setting other props as null_

![image](https://github.com/facebook/react-native/assets/39670088/9cba34c2-c9fc-4d84-a9cb-3b28a754671d)

### `selectionHandleColor`

![image](https://github.com/facebook/react-native/assets/39670088/8a7e488e-0e35-4646-9efe-4783420b41fa)

### `cursorColor`

![image](https://github.com/facebook/react-native/assets/39670088/06798b8a-851f-44c7-979e-a4e74681b29a)

Reviewed By: NickGerleman

Differential Revision: D51253298

Pulled By: javache

fbshipit-source-id: 290284aa38c6ba0aa6998b937258788ce6376431
Copy link

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

@github-actions github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Apr 17, 2024
Copy link

This issue was closed because it has been stalled for 7 days with no activity.

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Apr 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: TextInput Related to the TextInput component. Needs: Triage 🔍 Newer Patch Available Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

3 participants