[RNMobile] Fix BottomSheet.SubSheet/TextInput Conflict #33845
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The 'BottomSheetScreen' component was introduced in the following commit in order to correct a render error related to the 'setIsFullScreen' method: d650b4f#diff-d16d37d09ff59dce57c087e978ac5536503cb1642ec2b0ecdba9536f5c695b95R20 The way the component's currently rendering is causing a conflict with the TextInput component, however. With this commit, the component's removed, along with the 'setIsFullScreen' method (the method will be re-introduced in the following commits).
|
Size Change: +24 B (0%) Total Size: 1.08 MB
ℹ️ View Unchanged
|
With this commit, the 'setIsFullScreen' method is added back to the component. This time, it's added to its own separate 'useEffect' function.
SiobhyB
changed the title
SiobhyB
added
Mobile App - i.e. Android or iOS
2 tasks
dcalhoun
approved these changes
Aug 3, 2021
There was a problem hiding this comment.
Great work on this! Thank you! I verified the original keyboard/focus issue no longer occurs on an iPhone SE and Samsung Galaxy S20.
However, I did notice additional typing issues that appear to have been present from the very original implementation, even before d650b4f was applied.
- Typing quickly can cause the cursor to jump to an incorrect location, which results in incorrect text being entered into the field.
- (Android only) After moving the cursor to a different location, tapping the delete/backspace key caused the cursor to jump backwards 1 character.
Android Bug Recording
Screen_Recording_20210803-095218.mp4
Given that these issues appear to be separate, I think we should merge this fix as-is. We can open a separate issue and fix. WDYT?
Comment on lines
-20
to
-23
| const BottomSheetScreen = ( { onMount } ) => { | ||
| useEffect( onMount, [] ); | ||
| return children ?? null; | ||
| }; |
There was a problem hiding this comment.
My understanding from the PR description and testing is that the creation of this component within the render of its parent BottomSheetSubSheet is the root cause of the issue, correct?
I am not suggesting we change this PR, but I wanted to share the below alternative that is closer to the original implementation, purely for discussion's sake. It would appear merely hoisting BottomSheetScreen out of BottomSheetSubSheet does fix the original keyboard/focus issue.
Alternative Approach
diff --git a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js
index 8654dc918e..2af2c0f5da 100644
--- a/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js
+++ b/packages/components/src/mobile/bottom-sheet/sub-sheet/index.native.js
@@ -11,17 +11,17 @@ import { createSlotFill, BottomSheetConsumer } from '@wordpress/components';
const { Fill, Slot } = createSlotFill( 'BottomSheetSubSheet' );
+const BottomSheetScreen = ( { children, onMount } ) => {
+ useEffect( onMount, [] );
+ return children;
+};
+
const BottomSheetSubSheet = ( {
children,
navigationButton,
showSheet,
isFullScreen,
} ) => {
- const BottomSheetScreen = ( { onMount } ) => {
- useEffect( onMount, [] );
- return children ?? null;
- };
-
return (
<>
{ showSheet && (
@@ -33,7 +33,9 @@ const BottomSheetSubSheet = ( {
onMount={ () =>
setIsFullScreen( isFullScreen )
}
- />
+ >
+ { children }
+ </BottomSheetScreen>
) }
</BottomSheetConsumer>
</SafeAreaView>
Edit: Updated the diff to showcase the difference between the original implementation, instead of the difference between this PR.
There was a problem hiding this comment.
Thanks for this, David! 🙇♀️ You're right on what I believe to be the root cause of this issue (i.e. the creation of the child component within the parent). I appreciate you sharing that alternative approach, as hoisting the component isn't something I'd have come up with by myself, so will add it to my knowledge bank going forward.
Are there any positives or negatives to either approach? I'm definitely open to learning and updating the PR if there is anything steering you towards or away from either approach. If it's the case that they're fairly similar, with no major advantages/disadvantages to one another, I'll go ahead to merge the current PR.
There was a problem hiding this comment.
Are there any positives or negatives to either approach? I'm definitely open to learning and updating the PR if there is anything steering you towards or away from either approach. If it's the case that they're fairly similar, with no major advantages/disadvantages to one another, I'll go ahead to merge the current PR.
No, I wouldn't say there is a distinct positive or negative with either approach. It is merely differently structured code from my perspective.
That said, after reviewing this again, I believe this wrapping BottomSheetConsumer may be duplicative of the new useContext usage and unnecessary. I.e. we could likely remove BottomSheetConsumer altogether.
// React Context accessed via Consumer with function as a child
<BottomSheetConsumer>
{({ setIsFullScreen }) => {
// ...
}}
</BottomSheetConsumer>
// React Context accessed via useContext Hook
const { setIsFullScreen } = useContext(BottomSheetContext);For an explanation as to why, both of the above are accessing the React Context object. The former is using the Context.Consumer approach. The latter is using the React Hook approach. Either is fine. I believe this project generally attempts to rely upon React Hooks now-a-days.
Currently, this PR has a lingering BottomSheetConsumer that is largely going unused.
|
I have created the following two issues for the bugs that I found while testing this. |
added 2 commits
August 3, 2021 18:05
'BottomSheetConsumer' is no longer necessary as we're now using 'useContext' to pull in 'setIsFullScreen'. Further discussion here: #33845 (comment)
As 'BottomSheetConsumer' was removed in 5232398, 'children' no longer needs to be returned as part of a function. In fact, this results in an error. With this commit, the function surrounding the reference to 'children' is removed.
|
Thank you for the review and surfacing those bugs, @dcalhoun 🙇♀️ I'll go ahead with the merge domino when the tests are complete, unless anything else comes up for me to address. |
SiobhyB
added a commit
that referenced
this pull request
Aug 4, 2021
* Remove 'BottomSheetScreen' component The 'BottomSheetScreen' component was introduced in the following commit in order to correct a render error related to the 'setIsFullScreen' method: d650b4f#diff-d16d37d09ff59dce57c087e978ac5536503cb1642ec2b0ecdba9536f5c695b95R20 The way the component's currently rendering is causing a conflict with the TextInput component, however. With this commit, the component's removed, along with the 'setIsFullScreen' method (the method will be re-introduced in the following commits). * Refactor 'setIsFullScreen' method With this commit, the 'setIsFullScreen' method is added back to the component. This time, it's added to its own separate 'useEffect' function. * Remove 'BottomSheetConsumer' 'BottomSheetConsumer' is no longer necessary as we're now using 'useContext' to pull in 'setIsFullScreen'. Further discussion here: #33845 (comment) * Refactor reference to 'children' As 'BottomSheetConsumer' was removed in 5232398, 'children' no longer needs to be returned as part of a function. In fact, this results in an error. With this commit, the function surrounding the reference to 'children' is removed.
SiobhyB
added a commit
that referenced
this pull request
Aug 4, 2021
* Release script: Update react-native-editor version to 1.58.0 * Release script: Update with changes from 'npm run core preios' * Add 1.58 section to changelog * Release script: Update react-native-editor version to 1.58.1 * Release script: Update with changes from 'npm run core preios' * [Mobile] - Global styles: Check for undefined values and merge user colors (#33707) * Fix: Mobile - Check for undefined variables and merge user colors before parsing * Check for null values * Update react-native-editor changelog * [RNMobile][Embed block] Disable paragraph transform (#33745) * Update react-native-editor changelog * Release script: Update react-native-editor version to 1.58.2 * Release script: Update with changes from 'npm run core preios' * [RNMobile] Fix BottomSheet.SubSheet/TextInput Conflict (#33845) * Remove 'BottomSheetScreen' component The 'BottomSheetScreen' component was introduced in the following commit in order to correct a render error related to the 'setIsFullScreen' method: d650b4f#diff-d16d37d09ff59dce57c087e978ac5536503cb1642ec2b0ecdba9536f5c695b95R20 The way the component's currently rendering is causing a conflict with the TextInput component, however. With this commit, the component's removed, along with the 'setIsFullScreen' method (the method will be re-introduced in the following commits). * Refactor 'setIsFullScreen' method With this commit, the 'setIsFullScreen' method is added back to the component. This time, it's added to its own separate 'useEffect' function. * Remove 'BottomSheetConsumer' 'BottomSheetConsumer' is no longer necessary as we're now using 'useContext' to pull in 'setIsFullScreen'. Further discussion here: #33845 (comment) * Refactor reference to 'children' As 'BottomSheetConsumer' was removed in 5232398, 'children' no longer needs to be returned as part of a function. In fact, this results in an error. With this commit, the function surrounding the reference to 'children' is removed. * Update CHANGELOG * Fix merge issues with CHANGELOG Co-authored-by: Carlos Garcia <[email protected]> Co-authored-by: Gerardo Pacheco <[email protected]> Co-authored-by: Ceyhun Ozugur <[email protected]>
fluiddot
added a commit
that referenced
this pull request
Aug 12, 2021
* Release script: Update react-native-editor version to 1.58.0 * Release script: Update with changes from 'npm run core preios' * Add 1.58 section to changelog * Release script: Update react-native-editor version to 1.58.1 * Release script: Update with changes from 'npm run core preios' * [Mobile] - Global styles: Check for undefined values and merge user colors (#33707) * Fix: Mobile - Check for undefined variables and merge user colors before parsing * Check for null values * Update react-native-editor changelog * [RNMobile][Embed block] Disable paragraph transform (#33745) * Update react-native-editor changelog * Release script: Update react-native-editor version to 1.58.2 * Release script: Update with changes from 'npm run core preios' * [RNMobile] Fix BottomSheet.SubSheet/TextInput Conflict (#33845) * Remove 'BottomSheetScreen' component The 'BottomSheetScreen' component was introduced in the following commit in order to correct a render error related to the 'setIsFullScreen' method: d650b4f#diff-d16d37d09ff59dce57c087e978ac5536503cb1642ec2b0ecdba9536f5c695b95R20 The way the component's currently rendering is causing a conflict with the TextInput component, however. With this commit, the component's removed, along with the 'setIsFullScreen' method (the method will be re-introduced in the following commits). * Refactor 'setIsFullScreen' method With this commit, the 'setIsFullScreen' method is added back to the component. This time, it's added to its own separate 'useEffect' function. * Remove 'BottomSheetConsumer' 'BottomSheetConsumer' is no longer necessary as we're now using 'useContext' to pull in 'setIsFullScreen'. Further discussion here: #33845 (comment) * Refactor reference to 'children' As 'BottomSheetConsumer' was removed in 5232398, 'children' no longer needs to be returned as part of a function. In fact, this results in an error. With this commit, the function surrounding the reference to 'children' is removed. * Update CHANGELOG * Release script: Update react-native-editor version to 1.58.3 * Release script: Update with changes from 'npm run core preios' * Rich text - toTree - Add optional chaining in replacements before accessing its type (#34020) * Update CHANGELOG * Remove CHANGELOG duplicated sections after merge Co-authored-by: Siobhan <[email protected]> Co-authored-by: Carlos Garcia <[email protected]> Co-authored-by: Ceyhun Ozugur <[email protected]> Co-authored-by: Siobhan Bamber <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes: #33828
gutenberg-mobile:wordpress-mobile/gutenberg-mobile#3784Description
As outlined in #33828, the text editor for adding alt text to an image (accessed from the image block's settings) isn't currently working as expected. At the time of writing, the keyboard is immediately dismissed with each keystroke, making it extremely difficult, bordering on impossible, to add alt text to an image.
BottomSheetTextControl is the component behind the image block's alt text settings and is built on the BottomSheet.SubSheet component. There were changes to
BottomSheet.SubSheetin d650b4f that led to a conflict with theTextInputcomponent inBottomSheetTextControl, which brought this issue to the surface.With this PR, I have refactored the changes in d650b4f in a way that enables the alt text entry to work as expected.
How has this been tested?
Test Case 1: Alt Text Settings
The following steps outline an approach to test that the original bug is fixed with this PR.
Test Case 2: Help Panel (Production Only)
As part of our testing, we should also verify that the new changes don't bring any unexpected side effects to other places where the component's used, such as the Help panel.
Test Case 3: Full Screen (Code Changes Required)
Lastly, we'll need to double-check that the "isFullScreen" parameter works as expected following the refactor. This will require code changes.
isFullScreen={ true }to the list of parameters being accepted byBottomSheet.SubSheet.Screenshots
Screen.Recording.2021-08-03.at.14.26.40.mov
Types of changes
Bug fix (non-breaking change which fixes an issue), with the following high-level rundown of the main code changes:
setIsFullScreen( isFullScreen )method was moved to a standaloneuseEffecthook, which fires only when the values of eithershowSheetorisFullScreenchange.TextInputcomponent.Checklist:
*.native.jsfiles for terms that need renaming or removal).