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

RN parity: showSoftInputOnFocus property of <TextInput /> is not supported #2421

Closed
1 task done
christianwen opened this issue Nov 6, 2022 · 7 comments
Closed
1 task done
Labels
has: pr Subject of a pull request

Comments

@christianwen
Copy link

christianwen commented Nov 6, 2022

Is there an existing issue for this?

  • I have searched the existing issues

Describe the issue

In https://reactnative.dev/docs/textinput, there's the showSoftInputOnFocus property that will prevent the soft keyboard from showing when the field is focused, but react-native-web does not support this yet.

Expected behavior

showSoftInputOnFocus property of <TextInput /> works correctly

Steps to reproduce

  1. Create a TextInput with showSoftInputOnFocus=false
  2. Open mobile browser, click on the TextInput
  3. We still see the keyboard open, the keyboard should not open

Test case

https://codesandbox.io/s/runtime-paper-lgmxb3

Additional comments

Since react-native-web does not support showSoftInputOnFocus yet, we need to make an update to support it
In https://github.com/Expensify/react-native-web -> packages/react-native-web/src/exports/TextInput/index.js

const {
+    showSoftInputOnFocus = true
  } = props;
...
  switch (keyboardType) {
    case 'email-address':
      type = 'email';
      break;
    case 'number-pad':
    case 'numeric':
      inputMode = 'numeric';
      break;
    case 'decimal-pad':
      inputMode = 'decimal';
      break;
    case 'phone-pad':
      type = 'tel';
      break;
    case 'search':
    case 'web-search':
      type = 'search';
      break;
    case 'url':
      type = 'url';
      break;
    default:
      type = 'text';
  }

+  if (!showSoftInputOnFocus) {
+    inputMode = 'none';
+  }

I can open a PR for this once this issue proposal is accepted.
Thanks!
cc @necolas

@necolas
Copy link
Owner

necolas commented Nov 6, 2022

I think what we should do instead is do the mapping to inputMode in React Native. See facebook/react-native#34460

facebook-github-bot pushed a commit to facebook/react-native that referenced this issue Nov 8, 2022
#35228)

Summary:
This PR updates `inputMode` prop from the `TextInput` component to map the `none` option to `showSoftInputOnFocus={false}`  as suggested by necolas here -> #34460 (comment). This change makes the inputMode API behaves a bit more similarly across platforms.

Related to necolas/react-native-web#2421

## Changelog

[General] [Changed] -  Update TextInput inputMode to map "none" to showSoftInputOnFocus

## Test Plan

1. Open the RNTester app and navigate to the TextInput page
2. Test the `TextInput` component through the `Input modes` section

https://user-images.githubusercontent.com/11707729/200218435-6a33b319-e989-4086-aac3-506546982b38.mov

Pull Request resolved: #35228

Reviewed By: lunaleaps, necolas

Differential Revision: D41081876

Pulled By: jacdebug

fbshipit-source-id: cc634c3723647d8950bf2cfe67be70d0fbd488a6
@necolas
Copy link
Owner

necolas commented Nov 9, 2022

Support for inputMode='none' is now merged into react-native@main. Not sure if it will make it into the react-native@0.71.0 release. But inputMode will be supported in react-native-web@0.19.

@christianwen
Copy link
Author

@necolas do we have an estimated date for the react-native-web@0.19 release that will support the inputMode?

@christianwen

This comment was marked as off-topic.

@christianwen

This comment was marked as off-topic.

@necolas
Copy link
Owner

necolas commented Dec 13, 2022

No estimate

@necolas necolas added this to the 0.19: React 18 milestone Mar 20, 2023
@necolas necolas added has: pr Subject of a pull request and removed bug labels Mar 20, 2023
@necolas
Copy link
Owner

necolas commented Mar 27, 2023

Using inputMode is now possible in 0.19 and with RN 0.71+. Thanks

@necolas necolas closed this as completed Mar 27, 2023
OlimpiaZurek pushed a commit to OlimpiaZurek/react-native that referenced this issue May 22, 2023
facebook#35228)

Summary:
This PR updates `inputMode` prop from the `TextInput` component to map the `none` option to `showSoftInputOnFocus={false}`  as suggested by necolas here -> facebook#34460 (comment). This change makes the inputMode API behaves a bit more similarly across platforms.

Related to necolas/react-native-web#2421

## Changelog

[General] [Changed] -  Update TextInput inputMode to map "none" to showSoftInputOnFocus

## Test Plan

1. Open the RNTester app and navigate to the TextInput page
2. Test the `TextInput` component through the `Input modes` section

https://user-images.githubusercontent.com/11707729/200218435-6a33b319-e989-4086-aac3-506546982b38.mov

Pull Request resolved: facebook#35228

Reviewed By: lunaleaps, necolas

Differential Revision: D41081876

Pulled By: jacdebug

fbshipit-source-id: cc634c3723647d8950bf2cfe67be70d0fbd488a6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
has: pr Subject of a pull request
Projects
None yet
Development

No branches or pull requests

2 participants