-
Notifications
You must be signed in to change notification settings - Fork 4.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
[RNMobile] keyboard focus issues #15999
Conversation
Some blocks have multiple RichText or a RichText among other children. Example: Quote blocks has 2 RichTexts and Image block has a RichText for the caption. We want to control when and which of those RichTexts will request focus. On the web side, the DOM is used to search for a inputbox to focus but on RN, we don't have a DOM to search. Instead, this commit makes the assumption that a RichText always request focus if its parent has passed `true` in `isSelected` and only if the parent hasn't inhibited that behavior by using the `noFocusOnMount` prop.
That can happen when the RichText based block gets tapped somewhere and the caret position is not updated yet from Aztec.
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.
I have tested this via demo app and the crash has been fixed. 🎉
Also, I tested the scenarios described here: wordpress-mobile/gutenberg-mobile#1076 (comment) and everything is working as expected.
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.
LGTM!
In #15999 this behavior was changed to prevent the keyboard from disappearing when you press Enter to create a new paragraph. This worked in that case, but had the side effect of TextInputState still thinking a dead view had focus, and causing a crash in some scenarios.
* Remove focus from RichText when unmounting In #15999 this behavior was changed to prevent the keyboard from disappearing when you press Enter to create a new paragraph. This worked in that case, but had the side effect of TextInputState still thinking a dead view had focus, and causing a crash in some scenarios. * Only blur a RichText in replaceable block That RichText won't have the chance to blur earlier so, we need to do it on unmount. But, non replaceable blocks wont need to blur their RichText on unmount because that will happen normally in componentDidUpdate(). * Rename to an unstable, very goal-named name * Compute shouldBlurOnUnmount inside RichText
* [Mobile] Disable Video block on Android for v1.7.0 release (#16149) * Disable Video block on Android for v1.7.0 release * Add import statement to check platform * [RNMobile] Narrow down blur on unmount to replaceable only (#16151) * Remove focus from RichText when unmounting In #15999 this behavior was changed to prevent the keyboard from disappearing when you press Enter to create a new paragraph. This worked in that case, but had the side effect of TextInputState still thinking a dead view had focus, and causing a crash in some scenarios. * Only blur a RichText in replaceable block That RichText won't have the chance to blur earlier so, we need to do it on unmount. But, non replaceable blocks wont need to blur their RichText on unmount because that will happen normally in componentDidUpdate(). * Rename to an unstable, very goal-named name * Compute shouldBlurOnUnmount inside RichText * Fix no-duplicate-imports lint issue * Fix comma-dangle lint error * Remove trailing space from comment
Description
This PR tries to align closer to the web's logic of focus and selection.
How has this been tested?
Using the gutenberg-mobile PR: wordpress-mobile/gutenberg-mobile#1076
Types of changes
When RichText gets focused, update the selection state too https://github.com/WordPress/gutenberg/pull/15999/files#diff-4828a21853e899e5a36faecfa96d83e8R591
Lift the iOS only condition of blurring the RichText when
isSelected
transitions tofalse
. Same logic will now apply to Android too. This is now the primary way of blurring the text input field when the blocks gets unselected, replacing the logic in https://github.com/wordpress-mobile/gutenberg-mobile/blob/0533baf76be6fa9c9b0d3c6fa18855f5ed4d0083/src/block-management/block-holder.js#L76-L88.Drop
onFocus
from props and useunstableOnFocus
like the web side. Also, no need to check forownProps.onFocus
anymore sinceunstableOnFocus
will be picked up directly and the onFocus from the edit context is no longer used (apparently).No need to explicitly set
isSelected
,onFocus
andonBlur
on the Heading or Paragraph blocks just to pass its props. Those functionalities are handled internally by the RichText component now.Checklist: