-
Notifications
You must be signed in to change notification settings - Fork 24.3k
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
fix attempting to focus disabled textinputs #30695
Conversation
return; | ||
} | ||
// $FlowFixMe - `focus` is missing in `$ReadOnly` | ||
Object.getPrototypeOf(current)?.focus?.call(current); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
without using Object.getPrototypeOf, we'd end up in a recursive call
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@yungsters had some feedback:
I think a better fix would be for the platform to return a boolean — true if the focus is successful, and false otherwise.
But for now, this logic should live in TextInputState.focusTextInput.
function focusTextInput(textField: ?ComponentRef) {
// …
if (currentlyFocusedInputRef !== textField && textField != null) {
// EXPLANATION…
if (textField.props?.editable === false) {
return;
}
// …
}
}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@lunaleaps @yungsters the PR was updated, thanks for review
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thanks
Base commit: 2fdbf6a |
Base commit: 2fdbf6a |
dab1058
to
242a1ae
Compare
@lunaleaps has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
return; | ||
} | ||
// $FlowFixMe - `focus` is missing in `$ReadOnly` | ||
Object.getPrototypeOf(current)?.focus?.call(current); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@yungsters had some feedback:
I think a better fix would be for the platform to return a boolean — true if the focus is successful, and false otherwise.
But for now, this logic should live in TextInputState.focusTextInput.
function focusTextInput(textField: ?ComponentRef) {
// …
if (currentlyFocusedInputRef !== textField && textField != null) {
// EXPLANATION…
if (textField.props?.editable === false) {
return;
}
// …
}
}
@lunaleaps has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
This pull request was successfully merged by @vonovak in 8a5460c. When will my fix make it into a release? | Upcoming Releases |
Summary: when we call `focus()` upon a TextInput ref which has prop `editable=false` it marks the textinput as focused in `TextInputState` even though the focus is rejected by textinput itself because it is not editable. then, when you change `editable` prop to `true` and call `focus` again, [this condition](https://github.com/facebook/react-native/blob/e912c462eb0b7166ca5947bb5a3ee20761d910b6/Libraries/Components/TextInput/TextInputState.js#L46) or rather [this one](https://github.com/facebook/react-native/blob/1b2b2198e1b2383523b4655dc8c220d251b057d6/Libraries/Components/TextInput/TextInputState.js#L89) will evaluate to `false` and focus will not happen even though it can and should happen. see also https://github.com/facebook/react-native/blob/0.64-stable/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js#L3895 ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [General] [Fixed] - `focus()` on TextInput to respect its `editable` state Pull Request resolved: facebook#30695 Test Plan: Create a `TextInput` with prop `editable=false` and call `ref.current.focus()` upon its ref. TextInput should not be marked as focused in `TextInputState`. Reviewed By: yungsters Differential Revision: D34357913 Pulled By: lunaleaps fbshipit-source-id: 9a2fb819bbb05ef213c9b5d739dec583ae0a3e6f
Summary
when we call
focus()
upon a TextInput ref which has propeditable=false
it marks the textinput as focused inTextInputState
even though the focus is rejected by textinput itself because it is not editable.then, when you change
editable
prop totrue
and callfocus
again, this condition or rather this one will evaluate tofalse
and focus will not happen even though it can and should happen.see also https://github.com/facebook/react-native/blob/0.64-stable/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js#L3895
Changelog
[General] [Fixed] -
focus()
on TextInput to respect itseditable
stateTest Plan
Create a
TextInput
with propeditable=false
and callref.current.focus()
upon its ref. TextInput should not be marked as focused inTextInputState
.