react-native 在React Native升级到v0.73后,'selection' prop在Android上的TextInput中无法正常工作,

tyu7yeag  于 4个月前  发布在  React
关注(0)|答案(4)|浏览(110)

描述

在React Native升级之前,'selection'属性用于将光标设置为指定位置。这对于只读输入、预填充输入甚至正在填充数据的输入都是有效的。
在React Native升级到v0.73之后,它仅在数据正在填充的情况下有效,而在TextInput为只读或具有一些预填充数据时无效。

我们的实现:

我们使用状态变量在{start:0}和'null'之间切换选择。当输入获得焦点时,将选择设置为null,当输入失去焦点时,将选择更改为0。我们这样做是为了始终从起始位置显示输入数据(在Android中,默认情况下,这种行为不起作用,输入显示从末尾开始的数据)。

const [value, onChangeText] = React.useState(
    'This is a prefilled text inside this TextInput. Add more contents and check the selection prop',
  );
  const [selection, setSelection] = useState(
    Platform.OS === 'android' ? {start: 0} : null,
  );
  const handleOnFocus = () => {
    if (Platform.OS === 'android') {
      setSelection(null);
    }
  };
  const handleOnBlur = () => {
    if (Platform.OS === 'android') {
      setSelection({start: 0});
    }
  };

 <SafeAreaView>
      <ScrollView>
        <View style={styles?.container}>
          <Text>{'Text Input with prefilled data'}</Text>
          <TextInput
            onChangeText={text => onChangeText(text)}
            value={value}
            style={{
              padding: 10,
              width: 300,
              borderStartWidth: 1,
              borderEndWidth: 1,
              borderTopWidth: 1,
              boderLeftWidth: 1,
              borderRightWidth: 1,
              borderBottomWidth: 1,
              marginBottom: 10,
              borderRadius: 10,
            }}
            placeholder="Enter long text here..."
            selection={selection}
            onFocus={handleOnFocus}
            onBlur={handleOnBlur}
          />
          <Text>{'Text Input with readOnly data'}</Text>
          <TextInput
            onChangeText={text => onChangeText(text)}
            value={value}
            readOnly
            style={{
              padding: 10,
              width: 300,
              borderStartWidth: 1,
              borderEndWidth: 1,
              borderTopWidth: 1,
              boderLeftWidth: 1,
              borderRightWidth: 1,
              borderBottomWidth: 1,
              marginBottom: 10,
              borderRadius: 10,
              backgroundColor: '#f2f2f2',
            }}
            placeholder="Enter long text here..."
            selection={selection}
            onFocus={handleOnFocus}
            onBlur={handleOnBlur}
          />

          <Text>{'Change input focus here'}</Text>
          <TextInput
            placeholder="Use this to change focus"
            style={{
              padding: 10,
              width: 300,
              borderStartWidth: 1,
              borderEndWidth: 1,
              borderTopWidth: 1,
              boderLeftWidth: 1,
              borderRightWidth: 1,
              borderBottomWidth: 1,
              borderRadius: 10,
            }}
          />
        </View>
      </ScrollView>
    </SafeAreaView>```

**Note: This issue is only coming on Android.**

### Steps to reproduce

1. Clone the attached repo and install dependencies `( npm install )`
2. Run the app on Android simulator `( Pixel 6 Pro API 34 )`
3. In the launch page only, you will see 3 inputs. First input has prefilled data, where you can input some characters and remove the focus from this input field, by using the third input. The second input is readOnly, where the expected behavior is to show the input from start. As of now, in Android, it shows from end, when the input is blurred.

`Repo URL: https://github.com/hariomsinha7/bug-react-native-textinput`

### React Native Version

0.73.0

### Affected Platforms

Runtime - Android

### Areas

Fabric - The New Renderer, TurboModule - The New Native Module System, JSI - Javascript Interface, Codegen

### Output of `npx react-native info`

```text
System:
  OS: macOS 14.4.1
  CPU: (10) arm64 Apple M1 Pro
  Memory: 120.02 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.17.0
    path: ~/.nvm/versions/node/v18.17.0/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 9.6.7
    path: ~/.nvm/versions/node/v18.17.0/bin/npm
  Watchman:
    version: 2024.04.15.00
    path: /opt/homebrew/bin/watchman

堆栈跟踪或日志

NA

可重现问题

https://github.com/hariomsinha7/bug-react-native-textinput

截图和视频

NA

oyjwcjzk

oyjwcjzk1#

⚠️React Native的新版本可用!
i️您正在使用受支持的次要版本,但似乎有一个更新的补丁可用 - 0.73.7。请升级到您次要版本的最高补丁或最新版本,并验证问题是否仍然存在(或者,创建一个新项目并在其中重现问题)。如果无法重现,请告知我们,以便我们关闭此问题。这有助于确保我们关注仍在最近版本中存在的问题。
csbfibhn

csbfibhn2#

在这里也是一样。我已经尝试了几种方法,让光标在失去焦点后返回到开头,使输入值的开头可见,而结尾被截断,而不是相反的情况,这是默认设置。

zujrkrfu

zujrkrfu3#

@hariomsinha7 ,你能告诉我们升级到73.0之前的React Native版本吗?我觉得我在0.72.7版本中也遇到了同样的问题。

kh212irz

kh212irz4#

在当前代码中发现了问题,并将对此进行修复。

相关问题