feat: Add inputMode prop to TextInput component #34460

gabrieldonadel · 2022-08-19T19:24:03Z

Summary

This adds the inputMode prop to the TextInput component as requested on #34424, mapping web inputMode types to equivalent keyboardType values. This PR also updates RNTester TextInputExample in order to facilitate the manual QA.

Caveats

~~This only adds support to text, decimal, numeric, tel, search, email, and url types.~~

`inputMode="none"`

Currently mapped to default keyboard type.

The main problem with this input mode is that it's not supported natively neither on Android or iOS. Android TextView does accept none as android:inputType but that makes the text not editable, which wouldn't really solve our problem. UITextInput on iOS on the other hand doesn't even have something similar to avoid displaying the virtual keyboard.

If we really want to add the support for inputMode="none" one interesting approach we could take is to do something similar to what WebKit has done (WebKit/WebKit@3b5f0c8). In order to achieve this behavior, they had to return a UIView with a bounds of CGRectZero as the inputView of the WKContentView when inputmode=none is present.
~~I guess the real question here should be, do we really want to add this? Or perhaps should we just map inputMode="none" to keyboardType="default"~~

Android docs: https://developer.android.com/reference/android/widget/TextView#attr_android:inputType
iOS docs: https://developer.apple.com/documentation/uikit/uikeyboardtype?language=objc

`inputMode="search"` on Android

Currently mapped to default keyboard type.

Android TextView does not offers any options like UIKeyboardTypeWebSearch on iOS to be used as search with android:inputType and that's probably the reason why keyboardType="web-search" is iOS only. I checked how this is handled on the browser on my Android device and it seems that Chrome just uses the default keyboard, maybe we should do the same?

Open questions

~~What should be done about inputMode="none"?~~ Add it and map it to default keyboard type.
~~Which keyboard should we show on Android when inputMode="search"?~~ Use the default keyboard the same way Chrome does

Changelog

[General] [Added] - Add inputMode prop to TextInput component

Test Plan

Open the RNTester app and navigate to the TextInput page
Test the TextInput component through the Input modes section

Screen.Recording.2022-08-19.at.16.16.10.mov

analysis-bot · 2022-08-19T19:47:09Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,618,315	+445
android	hermes	armeabi-v7a	7,032,564	+440
android	hermes	x86	7,918,371	+441
android	hermes	x86_64	7,891,987	+436
android	jsc	arm64-v8a	9,495,611	+161
android	jsc	armeabi-v7a	8,273,233	+170
android	jsc	x86	9,433,404	+174
android	jsc	x86_64	10,026,379	+161

Base commit: 8c882b4
Branch: main

analysis-bot · 2022-08-19T20:27:52Z

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 8c882b4
Branch: main

facebook-github-bot · 2022-08-22T07:45:45Z

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

necolas · 2022-08-22T16:40:35Z

'none' => 'default' (or noop) sounds right.

necolas · 2022-08-22T16:41:47Z

Libraries/Components/TextInput/TextInput.js

+  | 'tel'
+  | 'search'
+  | 'email'
+  | 'url';


'none' should be added to the allowed values even if we do nothing with it

Sounds good, I've just added none there and mapped it to default

yungsters · 2022-08-24T09:21:30Z

Which keyboard should we show on Android when inputMode="search"?

Doing the same thing as Chrome seems reasonable. So inputMode="search" should display the default keyboard.

facebook-github-bot · 2022-08-24T09:26:23Z

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

gabrieldonadel · 2022-08-24T18:10:46Z

@cipolleschi I've just rebased this now that CI has been fixed

facebook-github-bot · 2022-08-25T16:01:01Z

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

facebook-github-bot · 2022-08-30T09:52:02Z

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

gabrieldonadel · 2022-08-30T18:24:47Z

@necolas @cipolleschi any thoughts on why this didn't get labeled as merged?

necolas · 2022-11-06T16:20:59Z

Apparently inputMode=none could be mapped to showSoftInputOnFocus

See necolas/react-native-web#2421

gabrieldonadel · 2022-11-07T02:43:09Z

Apparently inputMode=none could be mapped to showSoftInputOnFocus

See necolas/react-native-web#2421

Sounds good to me, gonna open a follow-up PR updating this

gabrieldonadel · 2022-11-07T03:14:17Z

Apparently inputMode=none could be mapped to showSoftInputOnFocus
See necolas/react-native-web#2421

Sounds good to me, gonna open a follow-up PR updating this

Here it goes @necolas #35228

#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

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

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Aug 19, 2022

react-native-bot added the Type: Enhancement A new feature or enhancement of an existing feature. label Aug 19, 2022

facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Aug 19, 2022

necolas reviewed Aug 22, 2022

View reviewed changes

necolas mentioned this pull request Aug 22, 2022

[w3c] ☂️ Web Props (Part 1) umbrella issue #34424

Closed

70 tasks

necolas approved these changes Aug 22, 2022

View reviewed changes

gabrieldonadel force-pushed the feat/add-input-mode-to-text-input branch from 11fb0b7 to e5f7e1a Compare August 24, 2022 01:59

gabrieldonadel force-pushed the feat/add-input-mode-to-text-input branch from e5f7e1a to 69f4b33 Compare August 24, 2022 18:10

gabrieldonadel added 2 commits August 29, 2022 22:35

feat: Add inputMode prop to TextInput component

484fe22

chore: Map none inputMode to default keyboardType

20fe307

gabrieldonadel force-pushed the feat/add-input-mode-to-text-input branch from 69f4b33 to 20fe307 Compare August 30, 2022 01:35

facebook-github-bot closed this in 9fac885 Aug 30, 2022

gabrieldonadel deleted the feat/add-input-mode-to-text-input branch August 30, 2022 16:11

necolas mentioned this pull request Nov 6, 2022

RN parity: showSoftInputOnFocus property of <TextInput /> is not supported necolas/react-native-web#2421

Closed

1 task

gabrieldonadel mentioned this pull request Nov 7, 2022

feat: Update TextInput inputMode to map "none" to showSoftInputOnFocus #35228

Closed

rcb4t2 mentioned this pull request Jan 26, 2023

[react-native]: Add inputMode prop to TextInput DefinitelyTyped/DefinitelyTyped#64100

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add inputMode prop to TextInput component #34460

feat: Add inputMode prop to TextInput component #34460

gabrieldonadel commented Aug 19, 2022 •

edited

Loading

analysis-bot commented Aug 19, 2022 •

edited

Loading

analysis-bot commented Aug 19, 2022 •

edited

Loading

facebook-github-bot commented Aug 22, 2022

necolas commented Aug 22, 2022

necolas Aug 22, 2022

gabrieldonadel Aug 22, 2022

yungsters commented Aug 24, 2022

facebook-github-bot commented Aug 24, 2022

gabrieldonadel commented Aug 24, 2022

facebook-github-bot commented Aug 25, 2022

facebook-github-bot commented Aug 30, 2022

gabrieldonadel commented Aug 30, 2022

necolas commented Nov 6, 2022

gabrieldonadel commented Nov 7, 2022

gabrieldonadel commented Nov 7, 2022

feat: Add inputMode prop to TextInput component #34460

feat: Add inputMode prop to TextInput component #34460

Conversation

gabrieldonadel commented Aug 19, 2022 • edited Loading

Summary

Caveats

inputMode="none"

inputMode="search" on Android

Open questions

Changelog

Test Plan

analysis-bot commented Aug 19, 2022 • edited Loading

analysis-bot commented Aug 19, 2022 • edited Loading

facebook-github-bot commented Aug 22, 2022

necolas commented Aug 22, 2022

necolas Aug 22, 2022

Choose a reason for hiding this comment

gabrieldonadel Aug 22, 2022

Choose a reason for hiding this comment

yungsters commented Aug 24, 2022

facebook-github-bot commented Aug 24, 2022

gabrieldonadel commented Aug 24, 2022

facebook-github-bot commented Aug 25, 2022

facebook-github-bot commented Aug 30, 2022

gabrieldonadel commented Aug 30, 2022

necolas commented Nov 6, 2022

gabrieldonadel commented Nov 7, 2022

gabrieldonadel commented Nov 7, 2022

gabrieldonadel commented Aug 19, 2022 •

edited

Loading

`inputMode="none"`

`inputMode="search"` on Android

analysis-bot commented Aug 19, 2022 •

edited

Loading

analysis-bot commented Aug 19, 2022 •

edited

Loading