search

necolas / react-native-web

Cross-platform React UI packages
https://necolas.github.io/react-native-web
MIT License
21.68k stars 1.79k forks source link

TextInput with selectTextOnFocus sometimes refocuses itself even after losing focus #2704

Closed QichenZhu closed 1 month ago

QichenZhu commented 3 months ago

Is there an existing issue for this?

Describe the issue

TextInput with selectTextOnFocus set to true selects text within a setTimeout. Even if the input is no longer focused after the timeout, it still selects text and refocuses itself.

Related issue: https://github.com/Expensify/App/issues/44245.

Expected behavior

TextInput should only select text if it is still focused after the timeout.

Steps to reproduce

Package version: 0.19.* Browser: Chrome 127.0.6533.72 Operating system: macOS 13.6.7

  1. Open https://codesandbox.io/p/sandbox/gallant-sun-zw5675.
  2. Click Item 19.
  3. Hold the Tab key for at least 5 seconds.
  4. Wait until the highlight stops changing and settles on any item except Item 19. If it settles on Item 19, return to step 3.

Expected result: The highlighted item is focused and pressing Tab again highlights the next item..

Actual result: The text input is focused and pressing Tab again highlights Item 0.

Test case

https://codesandbox.io/p/sandbox/gallant-sun-zw5675

Additional comments

A possible fix is to check if the text input is still focused in the setTimeout callback function below.

https://github.com/necolas/react-native-web/blob/54c14d64dabd175e8055e1dc92e9196c821f9b7d/packages/react-native-web/src/exports/TextInput/index.js#L292-L296