Skip to content

Commit

Permalink
fix: add missing submitBehavior prop type and mark blurOnSubmit p…
Browse files Browse the repository at this point in the history
…rop as deprecated in typescript declaration file of TextInput (#45588)

Summary:
Hi, I just found out that #33653 adds a new prop in `TextInput` that enables multiline `TextInput` be able to submit without blurring.

It does that by adding a new prop called `submitBehavior` which accepts `'submit' | 'blurAndSubmit' | 'newline'`:
https://github.com/facebook/react-native/blob/700b403e06fdcbcde2a4ade9570eb572431487ea/packages/react-native/Libraries/Components/TextInput/TextInput.js#L195

https://github.com/facebook/react-native/blob/700b403e06fdcbcde2a4ade9570eb572431487ea/packages/react-native/Libraries/Components/TextInput/TextInput.js#L910-L928

It also marks `blurOnSubmit` prop as deprecated since it can now be handled from `submitBehavior`:
https://github.com/facebook/react-native/blob/700b403e06fdcbcde2a4ade9570eb572431487ea/packages/react-native/Libraries/Components/TextInput/TextInput.js#L896-L908

However, that PR doesn't update `TextInput.d.ts` file which results Typescript to complain that the type doesn't exist:
<img width="760" alt="text_input_error" src="https://github.com/user-attachments/assets/2235cb36-1e4e-4ec9-a8b0-c09728a3336f">

So this PR adds and updates the types in declaration file to support them in Typescript
<img width="520" alt="fixed" src="https://github.com/user-attachments/assets/a7a3a0c4-9f3e-4644-bfac-ae60ac21d0f7">

## Changelog:

[GENERAL] [FIXED] - add missing `submitBehavior` prop and mark `blurOnSubmit` prop as deprecated in Typescript declaration file of `TextInput`

Pull Request resolved: #45588

Test Plan:
Before:
<img width="295" alt="before" src="https://github.com/user-attachments/assets/90ed0cd1-c127-4667-bf72-6b5317ea4dd6">

After:
<img width="589" alt="after1" src="https://github.com/user-attachments/assets/826002a4-45dc-4f97-882d-7622238ac766">

<img width="833" alt="after2" src="https://github.com/user-attachments/assets/467eeecd-4b0b-4740-ac78-253e3c7aa901">

Reviewed By: christophpurrer

Differential Revision: D60107516

Pulled By: dmytrorykun

fbshipit-source-id: ce79e41aefc1ef39dc1d44179405cf6a8d5e12de
  • Loading branch information
thisisgit authored and facebook-github-bot committed Jul 24, 2024
1 parent cab905b commit 1dcbf41
Showing 1 changed file with 32 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,8 @@ type DataDetectorTypes =
| 'none'
| 'all';

export type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';

/**
* DocumentSelectionState is responsible for maintaining selection information
* for a document.
Expand Down Expand Up @@ -649,11 +651,39 @@ export interface TextInputProps
autoFocus?: boolean | undefined;

/**
* If true, the text field will blur when submitted.
* The default value is true.
* If `true`, the text field will blur when submitted.
* The default value is true for single-line fields and false for
* multiline fields. Note that for multiline fields, setting `blurOnSubmit`
* to `true` means that pressing return will blur the field and trigger the
* `onSubmitEditing` event instead of inserting a newline into the field.
*
* @deprecated
* Note that `submitBehavior` now takes the place of `blurOnSubmit` and will
* override any behavior defined by `blurOnSubmit`.
* @see submitBehavior
*/
blurOnSubmit?: boolean | undefined;

/**
* When the return key is pressed,
*
* For single line inputs:
*
* - `'newline`' defaults to `'blurAndSubmit'`
* - `undefined` defaults to `'blurAndSubmit'`
*
* For multiline inputs:
*
* - `'newline'` adds a newline
* - `undefined` defaults to `'newline'`
*
* For both single line and multiline inputs:
*
* - `'submit'` will only send a submit event and not blur the input
* - `'blurAndSubmit`' will both blur the input and send a submit event
*/
submitBehavior?: SubmitBehavior | undefined;

/**
* If true, caret is hidden. The default value is false.
*/
Expand Down

0 comments on commit 1dcbf41

Please sign in to comment.