Commit Graph

60 Commits

Author SHA1 Message Date
Estevão Lucas
61c5e356ca Fix accessibility event properties for TextInput (#24641)
Summary:
When a `TextInput` receives any accessibility event prop (`onAccessibilityTap`, `onMagicTap`, `onAccessibilityEscape`, `onAccessibilityEscape`), causes a crash.

<p align=center><img src=https://user-images.githubusercontent.com/20709038/56871548-84f00980-69ed-11e9-8906-0206899e5435.jpg width=300></p>

[iOS] [Fixed] - Fix accessibility event properties for `TextInput`
Pull Request resolved: https://github.com/facebook/react-native/pull/24641

Differential Revision: D15120211

Pulled By: cpojer

fbshipit-source-id: 7996ab9f9b78588fab4986c3de6114817ec37296
2019-04-29 03:23:59 -07:00
zhongwuzw
bbd98d5c46 Fixed crash when textinput's default value exceeds maxLength (#24084)
Summary:
Bug comes from #23545, if `allowedLength < 0`, it would crash if `text.length > 1`.

cc. cpojer

[iOS] [Fixed] - Fixed crash when textinput's default value exceeds maxLength
Pull Request resolved: https://github.com/facebook/react-native/pull/24084

Differential Revision: D14562719

Pulled By: cpojer

fbshipit-source-id: 87ed930e35b8fa889d8b04829795fa46b7787b07
2019-03-22 03:57:58 -07:00
zhongwuzw
17415938c7 Fix TextInput maxLength when insert characters at begin (#23472)
Summary:
Fixes #21639 , seems we tried to fix this before, please see related `PR` like [D10392176](36507e4a3c), #18627, but they don't solve it totally.

[iOS] [Fixed] - Fix TextInput maxLength when insert characters at begin
Pull Request resolved: https://github.com/facebook/react-native/pull/23472

Reviewed By: mmmulani

Differential Revision: D14366406

Pulled By: ejanzer

fbshipit-source-id: fc983810703997b48824f84f2f9198984afba9cd
2019-03-12 11:16:44 -07:00
zhongwuzw
af52693e9c Keep placeholder paragraph style same with single line text input (#23765)
Summary:
Keep placeholder paragraph style same with text input.

[iOS] [Fixed] - Keep placeholder paragraph style same with single line text input
Pull Request resolved: https://github.com/facebook/react-native/pull/23765

Differential Revision: D14321255

Pulled By: cpojer

fbshipit-source-id: 2b8cbb7f2c7ceb40a9a2b142065dd6f5eb3d62eb
2019-03-05 00:10:44 -08:00
zhongwuzw
debd4462e0 Keep placeholder paragraph style same with text input (#23763)
Summary:
Keep placeholder paragraph style same with text input.

[iOS] [Fixed] - Keep placeholder paragraph style same with text input
Pull Request resolved: https://github.com/facebook/react-native/pull/23763

Differential Revision: D14320996

Pulled By: cpojer

fbshipit-source-id: 07c20722809395a74a48300fbb7cadebb8707b03
2019-03-04 23:09:55 -08:00
zhongwuzw
ba6f818d7d Fixed singleline text input placeholder size (#23745)
Summary:
After #23738 , we can add more text attributes to placeholder, so now, let's update the calculation of placeholder size based on placeholder attributes.

[iOS] [Fixed] - Fixed singleline text input placeholder size
Pull Request resolved: https://github.com/facebook/react-native/pull/23745

Differential Revision: D14320630

Pulled By: cpojer

fbshipit-source-id: 2d9e8b59ba70228202add762cfc9c6cbc77e5e95
2019-03-04 21:56:53 -08:00
zhongwuzw
fd954cda55 Add lineHeight support of placeholder for multiline text input (#23760)
Summary:
After some refactor of text input attributes, we can now add style attributes  the same as text input's attributes, from https://github.com/facebook/react-native/issues/19002#issuecomment-467171589, user wants placeholder to support line-height , I think we can add it now for multiline text input.

[iOS] [Added] - Added lineHeight support of placeholder for multiline text input
Pull Request resolved: https://github.com/facebook/react-native/pull/23760

Differential Revision: D14320600

Pulled By: cpojer

fbshipit-source-id: ededeaa11560af089ca15ffc188e2e70db2ad7d4
2019-03-04 21:50:09 -08:00
zhongwuzw
aa3b0d99f4 Fixed multiline text input placeholder size (#23742)
Summary:
After #23738 , we can add more text attributes to placeholder, so now, let's update the calculation of placeholder size based on placeholder attributes.

[iOS] [Fixed] - Fixed multiline text input placeholder size
Pull Request resolved: https://github.com/facebook/react-native/pull/23742

Differential Revision: D14320489

Pulled By: cpojer

fbshipit-source-id: 6b0f07fe7406d5c99c7280d584f8b8e51fc84c00
2019-03-04 21:30:05 -08:00
zhongwuzw
65c014d19f Keep placeholder attributes sync with text input text's attributes (#23738)
Summary:
We need to keep placeholder attributes sync with text input's text attributes, like `font`,`kern` ....., to keep style the same.

Also fixes #19002 .

[iOS] [Fixed] - Keep placeholder attributes sync with text input text's attributes
Pull Request resolved: https://github.com/facebook/react-native/pull/23738

Differential Revision: D14298482

Pulled By: cpojer

fbshipit-source-id: 3555091bf3bc01e4b026d5a4cdbe93b4122106e8
2019-03-03 19:59:57 -08:00
zhongwuzw
5b98adf629 Fixed wrong placeholder size calculation in multiline text input mode (#23682)
Summary:
We have the wrong calculation of placeholder size currently, leads `contentSize` or some things inaccuracy.

[iOS] [Fixed] - Fixed wrong placeholder size calculation in multiline text input mode
Pull Request resolved: https://github.com/facebook/react-native/pull/23682

Differential Revision: D14255932

Pulled By: cpojer

fbshipit-source-id: a1f40e90fc2c848579694965da8316fae9e5c4c5
2019-02-27 22:00:14 -08:00
zhongwuzw
c2071c216e Fixed wrong contentSize calculation when placeholder is hidden in multiline text input (#23683)
Summary:
Currently, we pick the max size of text view's contentSize and placeholder's size, actually, if placeholder is be hidden, we should only return text view's contentSize.

[iOS] [Fixed] - Fixed wrong contentSize calculation when placeholder is hidden in multiline text input
Pull Request resolved: https://github.com/facebook/react-native/pull/23683

Differential Revision: D14255915

Pulled By: cpojer

fbshipit-source-id: 198faa7e1c5657371eb920973345194aedf72e41
2019-02-27 21:55:24 -08:00
zhongwuzw
3b3e6a0eb3 Fixed onScroll prop in mulitline TextInput (#23668)
Summary:
We lose the support of `onScroll` prop for multiline TextInput, let's add it again.

[iOS] [Fixed] - Fixed onScroll prop in mulitline TextInput
Pull Request resolved: https://github.com/facebook/react-native/pull/23668

Differential Revision: D14253996

Pulled By: cpojer

fbshipit-source-id: 43ed191e18fdb716f6c53be3bf0f59f917b34b59
2019-02-27 18:26:27 -08:00
zhongwuzw
f3ad49be67 Fixed placeholder font not consistent with text's font when in multiline mode (#23654)
Summary:
Placeholder's font not consistent with text's font, it leads to cursor dislocation. We need to keep consistent between placeholder and text.

[iOS] [Fixed] - Fixed placeholder font not consistent with text's font when in multiline mode
Pull Request resolved: https://github.com/facebook/react-native/pull/23654

Differential Revision: D14226174

Pulled By: hramos

fbshipit-source-id: 7cfb3b73d8799d22d5cbbfe557df8de3f5fcf034
2019-02-26 09:36:45 -08:00
zhongwuzw
06c6c7c673 Remove compatible system code for iOS8 and before (#23656)
Summary:
We already only support `iOS9+`, so we can remove all compatible codes now.

[iOS] [Fixed] - Remove compatible system code for iOS8 and before
Pull Request resolved: https://github.com/facebook/react-native/pull/23656

Differential Revision: D14224986

Pulled By: hramos

fbshipit-source-id: cac9ffe6788dd3eaf4f4f5f2b219f325ba78e85f
2019-02-26 07:58:52 -08:00
zhongwuzw
7a7eb11965 Fix textAttributes not applied when typing text (#23585)
Summary:
Currently, if we has `defaultValue`, textAttributes like `letterSpacing` can works, but if textinput has not default text, when we typing the text, some attributes not applied.

[iOS] [Fixed] - Fix textAttributes not applied when typing text
Pull Request resolved: https://github.com/facebook/react-native/pull/23585

Differential Revision: D14206568

Pulled By: cpojer

fbshipit-source-id: 7db276d811684bf6e01f8d30287cca80095db87c
2019-02-24 23:37:41 -08:00
Peter Argany
e38be82dfa Revert of [D13948951]Apply the fix for CJK languages on single-line test fields.
Summary:
This PR (https://github.com/facebook/react-native/pull/22546) broke single line text inputs. After inputting some text and tapping away, the text input reverts back to default text.

Revert solved the issue.

Reviewed By: cpojer

Differential Revision: D14185897

fbshipit-source-id: cc7f0f2ebfb0494062afbc628c4fe27ad27fb1c6
2019-02-22 11:00:07 -08:00
Eric Lewis
8ce3c1b43e Toggle secureTextEntry cursor spacing (#23524)
Summary:
This is a fix for #5859, based on the feedback in #18587. Instead of using `didSetProps` it uses a setter. I will also note that setting to `nil` no longer works (crashes) so setting it to a blank string then back to the original works fine.

[iOS] [Fixed] - Toggling secureTextEntry correctly places cursor.
Pull Request resolved: https://github.com/facebook/react-native/pull/23524

Differential Revision: D14143028

Pulled By: cpojer

fbshipit-source-id: 5f3203d56b1329eb7359465f8ab50eb4f4fa5507
2019-02-21 23:51:16 -08:00
zhongwuzw
d834197746 Fix build error warning of Text module (#23586)
Summary:
Throw error warning when build Text module, we can add tvOS available check to remove error.

[iOS] [Fixed] - Fix build error warning of Text module
Pull Request resolved: https://github.com/facebook/react-native/pull/23586

Differential Revision: D14181198

Pulled By: cpojer

fbshipit-source-id: 6a62c831ba119ddcbc6effa0b24f22bd4588b982
2019-02-21 23:12:39 -08:00
Levi Buzolic
a89fe4165c Map TextInput textContentType strings to Objective-C constants (#22611)
Summary:
This is an updated version of #22579 which uses compile conditionals to prevent `use of undeclared identifier` errors when compiling on older versions of Xcode.

--------

Currently the only `textContentType` values that work are: `username`, `password`, `location`, `name` and `nickname`. This is due to the strings provided by React Native not matching up with the underlying string constants used in iOS (with the exception of the aforementioned types). Issue #22578 has more detail examples/explanation.
Pull Request resolved: https://github.com/facebook/react-native/pull/22611

Differential Revision: D13460949

Pulled By: cpojer

fbshipit-source-id: e6d1108422b850ebc3aea05693ed05118b77b5de
2019-02-19 23:52:40 -08:00
zhongwuzw
f8b52151eb Fixed textInput appearance not update when text attributes changed (#23533)
Summary:
If we change the text attributes dynamically, for example, change the textColor, it not works in iOS, Android works fine.

[iOS] [fixed] - Fixed textInput appearance not update when text attributes changed
Pull Request resolved: https://github.com/facebook/react-native/pull/23533

Differential Revision: D14146700

Pulled By: cpojer

fbshipit-source-id: 4a7c84d6e7f818acb712242bea6484b177a775c6
2019-02-19 22:02:20 -08:00
jsfu
f08c94bd36 fix the TextInput can't control input length when value's length > maxLength (#23545)
Summary:
I found the TextInput can't control input length when default value's length > maxLength.
for example:
1.Set the value in special cases
```
<TextInput value={'12345678'} maxLength={6}/>
```
2.Quickly press the keyboard with multiple fingers

```
// RCTBaseTextInputView.m
……
if (_maxLength) {
    NSUInteger allowedLength = _maxLength.integerValue - backedTextInputView.attributedText.string.length + range.length;
    if (text.length > allowedLength) {
……
```
when value's length > maxLength,the allowedLength not a negative number.it was transformed into a big number,because it is type NSUInteger.so the `text.length > allowedLength` always false.

[iOS][Fixed] - fix the TextInput can't control input length when value's length > maxLength
Pull Request resolved: https://github.com/facebook/react-native/pull/23545

Differential Revision: D14146581

Pulled By: cpojer

fbshipit-source-id: f53b1312ae55fad9fc10430ab94784c1a9ad4723
2019-02-19 21:41:07 -08:00
zhongwuzw
bd67254af1 fix typo in comments (#23478)
Summary:
Nit, just fix typo.

[iOS] [Fixed] - Fix typo in comments
Pull Request resolved: https://github.com/facebook/react-native/pull/23478

Differential Revision: D14101659

Pulled By: cpojer

fbshipit-source-id: b3d2bf25971c31a5fa3c411fbdfe761075dc4cfa
2019-02-15 07:18:30 -08:00
zhongwuzw
9ff43abe65 Prevent crash when scrollEnabled used in singleline textinput (#23361)
Summary:
Fixes #22949 , #21339. Currently, multiline textInput uses `UITextView` but singleline textInput uses `UITextField`, so singleline textinput may crash when use `scrollEnabled` property.

[iOS] [Fixed] - Prevent crash when scrollEnabled used in singleline textinput
Pull Request resolved: https://github.com/facebook/react-native/pull/23361

Differential Revision: D14030586

Pulled By: cpojer

fbshipit-source-id: a8ae1b4e168469e65745c4d5e9329df8b6faa2aa
2019-02-11 14:52:59 -08:00
dchersey
f307ac7c5e Fixes capitalized I's when emojiis are present after the text being edited. (#21951)
Summary:
Fixes #21243.
Fixes #20908.

Credit goes to superandrew213 who provided the patch based on 0.56; this commit merges and resolved the conflict introduced in 0.57.
Pull Request resolved: https://github.com/facebook/react-native/pull/21951

Differential Revision: D13980799

Pulled By: cpojer

fbshipit-source-id: 6b9f1a1ae54ad9dba043005d683d6a221472c729
2019-02-07 02:15:58 -08:00
Igor Mandrigin
05ebf77175 Apply the fix for CJK languages on single-line text fields. (#22546)
Summary:
Follow-up to https://github.com/facebook/react-native/pull/19809

This fix generalizes the `setAttributedString:` fix to single-line text fields.

Fixes #19339

_Pull requests that expand test coverage are more likely to get reviewed. Add a test case whenever possible!_
Pull Request resolved: https://github.com/facebook/react-native/pull/22546

Differential Revision: D13948951

Pulled By: shergin

fbshipit-source-id: 67992c02b32f33f6d61fac4554e4f46b973262c1
2019-02-04 15:09:46 -08:00
Ben Holcomb
6cc6f8f488 Revert D13402177: [react-native][PR] Map textContentType strings to Objective-C constants
Differential Revision:
D13402177

Original commit changeset: 55f4a2029cd3

fbshipit-source-id: b4871d10a9622f3312845a6682c482760e7e79e0
2018-12-10 13:05:12 -08:00
Levi Buzolic
077386a233 Map textContentType strings to Objective-C constants (#22579)
Summary:
Fixes #22578

Currently the only `textContentType` values that work are: `username`, `password`, `location`, `name` and `nickname`. This is due to the strings provided by React Native not matching up with the underlying string constants used in iOS (with the exception of the aforementioned types). Issue #22578 has more detail examples/explanation.
Pull Request resolved: https://github.com/facebook/react-native/pull/22579

Differential Revision: D13402177

Pulled By: shergin

fbshipit-source-id: 55f4a2029cd3ea1fb4834e9f56d2df5a05b31b4e
2018-12-10 12:11:51 -08:00
Igor Mandrigin
f77aa4eb45 Avoid using -[UITextView setAttributedString:] while user is typing (#19809)
Summary:
iOS-specific.
For languages with complex input (such as Japanese or Chinese), a user has to type multiple characters that are then merged into a single one.
If `-[UITextView setAttributedString:]` is used while the user is still typing, it resets the input and characters are not being treated as typed together.

This PR avoids calling this method if possible, replacing it by just copying the attributes if the string has not been changed. That preserves the state and user can continue to type Korean or Chinese characters.

Fixes #19339

<!--
  Required: Write your motivation here.
  If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->

<!--
  Required: Write your test plan here. If you changed any code, please provide us with
  clear instructions on how you verified your changes work. Bonus points for screenshots and videos!
-->

Essentially, the steps to reproduce are described in [the issue](https://github.com/facebook/react-native/issues/19339):

1. Type some Korean characters in TextInput, such as "하늘" (buttons `ㅎ`,`ㅏ`,`ㄴ`,`ㅡ`,`ㄹ`).
2. Then move the cursor to the beginning of the text, type "파란" (buttons `ㅍ`,`ㅏ`,`ㄹ`,`ㅏ`,`ㄴ`) this time.

**Behaviour before this fix (broken)**
Actual text: `ㅍㅏㄹㅏㄴ하늘`.
Expected text: `파란하늘`.
Characters aren't combined properly.

![ezgif com-resize](https://user-images.githubusercontent.com/466427/41613572-4256dda8-73f6-11e8-99a9-0ab833202b95.gif)

**Behaviour after this fix (correct)**
Actual text: `파란하늘`.
Expected text: `파란하늘`.
Characters are combined, the same behaviour is in vanilla iOS `UITextView`.

![input-with-fix](https://user-images.githubusercontent.com/466427/41613526-1aae2284-73f6-11e8-87f2-c1cef51cd83a.gif)

<!--
  Does this PR require a documentation change?
  Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->

<!--
  Required.
  Help reviewers and the release process by writing your own release notes. See below for an example.
-->

[IOS] [BUGFIX] [TextView] - Fix Korean/Chinese/Japanese input for multiline TextView on iOS.

<!--
  **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

    CATEGORY
  [----------]      TYPE
  [ CLI      ] [-------------]    LOCATION
  [ DOCS     ] [ BREAKING    ] [-------------]
  [ GENERAL  ] [ BUGFIX      ] [ {Component} ]
  [ INTERNAL ] [ ENHANCEMENT ] [ {Filename}  ]
  [ IOS      ] [ FEATURE     ] [ {Directory} ]   |-----------|
  [ ANDROID  ] [ MINOR       ] [ {Framework} ] - | {Message} |
  [----------] [-------------] [-------------]   |-----------|

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Pull Request resolved: https://github.com/facebook/react-native/pull/19809

Differential Revision: D13326614

Pulled By: shergin

fbshipit-source-id: 6a5cab3f7290f0f623a6f4c29353a573eb321b0b
2018-12-04 13:23:43 -08:00
Emily Janzer
36507e4a3c Fix issue when inserting text at 0 when maxLength is set
Summary:
1. The user inserts a character ('0') at index 0. Because the range matches 0, 0, predictedText is set to that character that was inserted.
2. In textInputDidChange, it discovers a mismatch between the rendered text ('1234') and predicted text ('0')
3. This triggers textInputShouldChangeTextInRange to be called again with the 'new' text that it thinks was just added ('1234')
4. It goes to insert this text, but runs into the maxLength limit, so it gets truncated and then inserted.

(I'm not totally sure why only happens if maxLength is set - I need to look into that.)

One fix for this is to just get rid of the range check, but that'll regress #18374. I decided to just check and see if the rendered text is empty instead of checking the range where text could be inserted, since that seems like it should properly handle both cases.

Reviewed By: shergin

Differential Revision: D10392176

fbshipit-source-id: 84fb3b6cac9b0aa25b3c1a127d43f9cdc5a1c6a8
2018-10-16 19:44:28 -07:00
Janic Duplessis
2191eecf54 Fix InputAccessoryView safe area when not attached to a TextInput (#21179)
Summary:
When using an InputAccessoryView attached to a TextInput the safe area insets are not applied properly. This uses different autolayout constraints that works in all cases I tested, roughly based on the technique used here https://github.com/stockx/SafeAreaInputAccessoryViewWrapperView/blob/master/SafeAreaInputAccessoryViewWrapperView/Classes/SafeAreaInputAccessoryViewWrapperView.swift#L38.
Pull Request resolved: https://github.com/facebook/react-native/pull/21179

Differential Revision: D9928503

Pulled By: hramos

fbshipit-source-id: b1b623334558093042fd94ac85e1b52dd16aa1a0
2018-09-18 18:31:51 -07:00
Héctor Ramos
1151c096da Update copyright headers to yearless format
Summary: This change drops the year from the copyright headers and the LICENSE file.

Reviewed By: yungsters

Differential Revision: D9727774

fbshipit-source-id: df4fc1e4390733fe774b1a160dd41b4a3d83302a
2018-09-11 15:33:07 -07:00
magicien
2307ea60d0 Fix #18272 TextInput.setNativeProps({text: ''}) to work (#18278)
Summary:
Fix #18272. Calling textInputRef.setNativeProps({text: ''}) or textInputRef.clear() should clear the text input.

- All tests of `yarn run test` are passed
- Test with [the sample app](https://github.com/magicien/react-native-textinput-clear).
    - TextInput.clear() and TextInput.setNativeProps({ text: '***' }) worked
    - When clear() or setNativeProps() called, onChange/onChangeText wasn't called
        - Same behavior as react 0.53.0
    - When non-string values are given to `setNativeProps({text: ___})`, its behavior is the same as react 0.53.0.
        - Value Type | Result
          ---------- | ------------
          null       | same as empty string ''
          undefined  | nothing changes
          number     | throw error
          function   | throw error
          object     | throw error
    - When clear() or setNativeProps() called, attributed text keeps the attributes
    - When `value` prop is set, the text can't be changed

- `clear()` doesn't work from the second time
- `setNativeProps({text '***'})` doesn't work from the second time
- Even when `value` prop is set, you can change the text

![ScreenShot_0.54.0](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/0.54.0_test.gif)

- `clear()` works every time
- `setNativeProps({text '****'})` works every time

![ScreenShot_Clear_1](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/clear_test_1.gif)

![ScreenShot_Clear_2](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/clear_test_2.gif)

- The text keeps the attributes (font family, size, color, text align)

![ScreenShot_Slider](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/attributed_text_test.gif)

- If `value` prop is set, the text should not be changed

![ScreenShot_Value](https://raw.githubusercontent.com/magicien/react-native-textinput-clear/master/screenshot/value_test.gif)

[IOS] [BUGFIX] [TextInput] - Fix TextInput.clear() and TextInput.setNativeProps({text: ''}) to work
Pull Request resolved: https://github.com/facebook/react-native/pull/18278

Reviewed By: shergin

Differential Revision: D9692561

Pulled By: hramos

fbshipit-source-id: b7ce8f6740fdf666e71d6a85743331ca4805edcb
2018-09-10 17:49:27 -07:00
Johannes Baldursson
610412385b Exposed scrollEnabled on TextInput (#19330)
Summary:
On iOS, it is not possible to select a range of text using a `Text` component (see #13938). Because of how the `Text` component is implemented on iOS, this will not work without a complete re-write. On Android however, this is not an issue.

As the `TextInput` component has evolved, it can more or less be used as a drop-in replacement on iOS by setting `multiline={true}` and `editable={false}`. Except for one detail: the text input field has scrolling activated and it's not possible to turn off. (See #1391 and #15962).

This pull request addresses that issue, simply by exposing the `scrollEnabled` property:

```
<TextInput
    multiline
    editable={false}
    scrollEnabled={false}
  />
```

1. Create a multiline `TextInput` component, with the attributes presented above.
2. Run on iOS
3. The `TextInput` field should not be able to scroll

facebook/react-native-website#367

[IOS] [FEATURE] [TextInput] - Made it possible to turn off scrolling on a multiline TextInput component
Pull Request resolved: https://github.com/facebook/react-native/pull/19330

Differential Revision: D9235061

Pulled By: hramos

fbshipit-source-id: 99d278004fc236b47dde7e61d74c71e8a3b9d170
2018-08-08 18:46:53 -07:00
Mehdi Mulani
892212bad2 Fix controlled <TextInput> on iOS when inputting in Chinese/Japanese
Summary:
@public
This should fix #18403.
When the user is inputting in Chinese/Japanese with <TextInput> in a controlled manner, the RCTBaseTextInputView will compare the JS-generated attributed string against the TextInputView attributed string and repeatedly overwrite the TextInputView one. This is because the native TextInputView will provide extra styling to show that some text is provisional.
My solution is to do a plain text string comparison at this point, like how we do for dictation.

Expected behavior when typing in a language that has "multistage" text input: For instance, in Chinese/Japanese it's common to type out the pronunciation for a word and then choose the appropriate word from above the keyboard. In this model, the "pronunciation" shows up in the text box first and then is replaced with the chosen word.
Using the word Japan which is written 日本 but first typed as にほん. It takes 4 key-presses to get to 日本, since に, ほ, ん, are all typed and then 日本 is selected. So here is what should happen:

1. enter に, onChange fires with 'に', markedTextRange covers 'に'
2. enter ほ, onChange fires with 'にほ', markedTextRange covers 'にほ'
3. enter ん, onChange fires with 'にほん', markedTextRange covers 'にほん'
4. user selects 日本 from the menu above the keyboard (provided by the keyboard/OS), onChange fires with '日本', markedTextRange is removed

previously we were overwriting the attributed text which would remove the markedTextRange, preventing the user from selecting 日本 from above the keyboard.

Cheekily, I've also fixed an issue with secure text entry as it's the same type of problem.

Reviewed By: PeteTheHeat

Differential Revision: D9002295

fbshipit-source-id: 7304ede055f301dab9ce1ea70f65308f2a4b4a8f
2018-07-30 08:01:10 -07:00
Pavlos Vinieratos
5f9a2117bf Remove some methods that have NS_UNAVAILABLE set (#19790)
Summary:
These lines were causing erros with the e2e tests on ios.
There are some methods that are not going to be called, and some definitions that are not correct.

needed for #19574.

we will run the e2e tests.

[INTERNAL] [MINOR] [Tests] - Fix some definitions.
Closes https://github.com/facebook/react-native/pull/19790

Differential Revision: D8509228

Pulled By: hramos

fbshipit-source-id: 78650e347db52305a587e3461ac56877e3c79062
2018-06-19 02:18:01 -07:00
Eoin Norris
a7a2ef1bb6 Possible fix for 18890 (#19687)
Summary:
Potential fixes for 18890. The issue was that when the setAttributedText method in RCTBaseTextInputView.m is called it does two main things:

Check that the attributed text that it receives is equal to the existing attributed text in the underlying backed up view ( backedTextInputView)
If not set the attributed text of the backed up view to the value passed into the method. This kills the dictation as it is effectively the equivalent of typing in the backed up text view.
    self.backedTextInputView.attributedText = attributedText;
is the problem. It kills the dictation. It may have other effects as well.

In all cases I have seen the underlying text of the attributed string that is passed in the same as the text in the backedTextInputView, what was said to the dictation; however the attributes are different, which causes the isEqualToAttributedString: check to fail and thus the update happens, and the keyboard is killed.

Fix is to test for the underlying string equality not the attributed string equality when the input mode is dictation.

By necessity this had to be an integration test on an existing application. To test I enabled the keyboard and started the dictation. It worked with this fixes and not without. Will upload videos later.

This might break attributes on dictation, as it is happening. However anything set on the existing underlying text view should hold.

[IOS] [BUG] [Textinput] fixed an issue where the keyboard dictation ended abruptly.
Closes https://github.com/facebook/react-native/pull/19687

Differential Revision: D8450590

Pulled By: hramos

fbshipit-source-id: f97084131f98e9e0ed1f32111afc0f9f510f3b3b
2018-06-15 10:37:42 -07:00
hamaron
1ffb2b63be iOS: Fixed the bug where a Backspace event was emitted when entering characters after clearing a text in TextInput by an empty string (#18627)
Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.

<!--
  Required: Write your motivation here.
  If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->

1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from #18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.

```javascript
type Props = {};
type State = {
  text: string,
  keys: string
};
export default class App extends Component<Props, State> {
  state = {text: '', keys: ''}
  render() {
    return (
      <View style={styles.container}>
        <TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
        <Button title="Clear" onPress={this.onClear}/>
        <Text>Text: {this.state.text}</Text>
        <Text>Keys: {this.state.keys}</Text>
      </View>
    );
  }

  onChangeText = (text: string) => {
    this.setState({text})
  }

  onKeyPress = ({ nativeEvent }: Object) => {
    this.setState({keys: this.state.keys + nativeEvent.key + ', '})
  }

  onClear = () => {
    this.setState({text: '', keys: ''})
  }
}
```

<!--
  Does this PR require a documentation change?
  Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->

<!--
  Required.
  Help reviewers and the release process by writing your own release notes. See below for an example.
-->

[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string

<!--
  **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

    CATEGORY
  [----------]      TYPE
  [ CLI      ] [-------------]    LOCATION
  [ DOCS     ] [ BREAKING    ] [-------------]
  [ GENERAL  ] [ BUGFIX      ] [ {Component} ]
  [ INTERNAL ] [ ENHANCEMENT ] [ {Filename}  ]
  [ IOS      ] [ FEATURE     ] [ {Directory} ]   |-----------|
  [ ANDROID  ] [ MINOR       ] [ {Framework} ] - | {Message} |
  [----------] [-------------] [-------------]   |-----------|

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes https://github.com/facebook/react-native/pull/18627

Differential Revision: D8436331

Pulled By: hramos

fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
2018-06-14 18:30:54 -07:00
Mattijs Fuijkschot
8baaacb664 - Keyboard layout now updates when changing keyboardType while it has focus (#19027)
Summary:
This PR makes sure that changing the `keyboardType` props of `<TextInput>` is reflected while the text field has focus. It is something that is also discusses in #13782. The workaround mentioned in that issue using `key` causes the TextInput to re-render itself which has some undesired side-effects.

Fixes #13782

```javascript
export default class KeyboardTypeApp extends Component {
  state = { keyboardType: 'default' };

  toggleKeyboardType = () => {
    this.setState({
      keyboardType: this.state.keyboardType === 'default' ? 'numeric' : 'default'
    });
  }

  render() {
    return (
      <View style={{ padding: 40 }}>
        <TextInput autoFocus value="Press Toggle :)" keyboardType={this.state.keyboardType} />
        <Button title="Toggle" onPress={this.toggleKeyboardType} />
      </View>
    );
  }
}
```

![video](https://user-images.githubusercontent.com/706368/39268429-3e331440-48d0-11e8-947c-7d334e3cec50.gif)

<!--
  Does this PR require a documentation change?
  Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->

 [IOS] [ENHANCEMENT] [TextInput] - Keyboard layout now updates when changing `keyboardType` while it has focus

<!--
  **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

    CATEGORY
  [----------]      TYPE
  [ CLI      ] [-------------]    LOCATION
  [ DOCS     ] [ BREAKING    ] [-------------]
  [ GENERAL  ] [ BUGFIX      ] [ {Component} ]
  [ INTERNAL ] [ ENHANCEMENT ] [ {Filename}  ]
  [ IOS      ] [ FEATURE     ] [ {Directory} ]   |-----------|
  [ ANDROID  ] [ MINOR       ] [ {Framework} ] - | {Message} |
  [----------] [-------------] [-------------]   |-----------|

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes https://github.com/facebook/react-native/pull/19027

Differential Revision: D8416007

Pulled By: PeteTheHeat

fbshipit-source-id: c4f89ab3dc0819bca52feddbc9c7a9f62fd96794
2018-06-13 22:47:47 -07:00
Peter Argany
490f22ae72 Fix bug with <InputAccessoryView> safe area conformance
Reviewed By: wwalser

Differential Revision: D7507732

fbshipit-source-id: 10bf8d58c65f1353a3e62a27fc74c2dfd73ac2c4
2018-04-04 16:47:16 -07:00
Christian Brevik
d4fb87b0b8 Add iOS 10 textContentType for TextInput
Summary:
Setting `textContentType` will provide the keyboard and system with semantic meaning for inputs. Should enable password/username autofill in apps running on iOS 11+ as demonstrated here: https://developer.apple.com/videos/play/wwdc2017/206/

Also gives you the ability to disable autofill by setting `textContentType="none"`: https://stackoverflow.com/questions/48489479/react-native-disable-password-autofill-option-on-ios-keyboard

Adding `textContentType` equal to `username` or `password`  should give you an autofill-bar over the keyboard which will let you fill in values from the device Keychain:

![image](https://user-images.githubusercontent.com/4932625/37848513-b2170490-2ed4-11e8-85bf-895823d4f98a.png)

Setting the appropriate `textContentType` will fill in the correct value in the `TextInput`.
I have only been able to get this to work on device, and not simulator.

Usage:
```jsx
<TextInput
    value={this.state.username}
    onChangeText={this.setUserName}
    textContentType="username"
/>
```

```jsx
<TextInput
    value={this.state.password}
    onChangeText={this.setPassword}
    secureTextEntry={true}
    textContentType="password"
/>
```

To disable:
```jsx
<TextInput
    value={this.state.password}
    onChangeText={this.setPassword}
    secureTextEntry={true}
    textContentType="none"
/>
```

This will set `textContentType` to an empty string: https://stackoverflow.com/a/46474180/5703116

<!--
  Does this PR require a documentation change?
  Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->

Docs PR coming up.

[IOS] [MINOR] [TextInput] - Added `textContentType` prop for iOS 10+. Will enable password autofill for iOS 11+.
Closes https://github.com/facebook/react-native/pull/18526

Differential Revision: D7469630

Pulled By: hramos

fbshipit-source-id: 852a9749be98d477ecd82154c0a65a7c084521c1
2018-04-02 02:46:43 -07:00
Peter Argany
ff70ecf868 Fixed <TextInput> bug with autocapitalization
Reviewed By: shergin

Differential Revision: D7304936

fbshipit-source-id: ef587db89b64e7111dfdeb049c3a1a334c15430b
2018-03-19 14:20:18 -07:00
Cristiano Santos
def789cd7e Wrong height when TextInput has an empty string
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

The caret/cursor did not appear when the TextInput was empty. Found that the cause was because the frame of the TextInput had an height of 0

Just fill and clear a TextInput and the caret/cursor will always appear there.

<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAL  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
[IOS] [BUGFIX] [TextInput] - This was causing the cursor/caret to not appear since the size of the frame had an height of 0.
Closes https://github.com/facebook/react-native/pull/18355

Differential Revision: D7319723

Pulled By: shergin

fbshipit-source-id: b0249ab5493b6ac310d1898ff20c0bad78cf82c9
2018-03-19 02:46:34 -07:00
Kevin Gozali
1c53471911 iOS OSS: fixed RNTester - missing RCTInputAccessoryShadowView.* in .xcodeproj
Reviewed By: yungsters

Differential Revision: D7317380

fbshipit-source-id: 0a40d62c70cd3c3a875e5a418f4b77fecb0417b1
2018-03-17 22:01:15 -07:00
Peter Argany
139d554c48 Replace js Dimensions with shadow view in InputAccessoryViewExample
Reviewed By: mmmulani

Differential Revision: D7196168

fbshipit-source-id: 031ed5ab24d1075f775ec71e5b78d32e03fe8f6f
2018-03-15 10:14:15 -07:00
Peter Argany
c136c54ff0 Refactor RCTInputAccessoryView view hierarchy and names
Reviewed By: shergin

Differential Revision: D7196162

fbshipit-source-id: 07a5c13d4cdb876f5a632d7d53859eab5e235f49
2018-03-13 11:25:12 -07:00
Peter Argany
6d9fe455dc Fixed TVOS test failure caused by input accessory view change
Reviewed By: mmmulani

Differential Revision: D7103353

fbshipit-source-id: 7a1575eff0296017521fc8ca6fe384301849a73e
2018-02-27 17:56:48 -08:00
Alex Hinson
2dd2529b3a Add option to hide context menu for TextInput #17335
Summary:
<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html

Happy contributing!

-->

There is currently no way to disable to context menu that automatically appears over a TextInput. This is especially troublesome if you would like to disable the user from pasting text into certain fields. This PR adds a `contextMenuHidden` property to TextInput that will hide it.

I'm not sure if testing is necessary here. I would be happy to investigate further on how this would be tested, if deemed necessary!

https://github.com/facebook/react-native-website/pull/95

<!--
Help reviewers and the release process by writing your own release notes

**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**

  CATEGORY
[----------]        TYPE
[ CLI      ]   [-------------]      LOCATION
[ DOCS     ]   [ BREAKING    ]   [-------------]
[ GENERAL  ]   [ BUGFIX      ]   [-{Component}-]
[ INTERNAL ]   [ ENHANCEMENT ]   [ {File}      ]
[ IOS      ]   [ FEATURE     ]   [ {Directory} ]   |-----------|
[ ANDROID  ]   [ MINOR       ]   [ {Framework} ] - | {Message} |
[----------]   [-------------]   [-------------]   |-----------|

[CATEGORY] [TYPE] [LOCATION] - MESSAGE

 EXAMPLES:

 [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
 [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
 [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
 [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
 [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
 [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->

[FEATURE][TextInput] - Added `contextMenuHidden` property
Closes https://github.com/facebook/react-native/pull/18125

Differential Revision: D7101888

Pulled By: hramos

fbshipit-source-id: fe36603a3fbdcefbd644251a7ea894ac7e23e5b8
2018-02-27 17:32:24 -08:00
Peter Argany
38197c8230 Support Input Accessory View (iOS Only) [1/N]
Reviewed By: mmmulani

Differential Revision: D6886573

fbshipit-source-id: 71e1f812b1cc1698e4380211a6cedd59011b5495
2018-02-27 11:09:30 -08:00
Sophie Alpert
1490ab12ef Update license headers for MIT license
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.

find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.

Reviewed By: TheSavior, yungsters

Differential Revision: D7007050

fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
2018-02-16 18:31:53 -08:00
Mehdi Mulani
cff522d283 Dirty text shadow nodes on UIManager queue after multiplier changes
Summary: Letting them fire on whatever queue we get the notification from throws an assert.

Reviewed By: shergin

Differential Revision: D7002789

fbshipit-source-id: 669474af1a07f0df6784b69b54afe0152c1ba3c4
2018-02-16 12:37:42 -08:00