Skip to content
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

Android - Keyboard not showing up after closing the BottomSheet #28748

Closed
geriux opened this issue Feb 4, 2021 · 3 comments
Closed

Android - Keyboard not showing up after closing the BottomSheet #28748

geriux opened this issue Feb 4, 2021 · 3 comments
Assignees
Labels
Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later [Type] Bug An existing feature does not function as intended

Comments

@geriux
Copy link
Member

geriux commented Feb 4, 2021

Description

While working on this issue I found an issue on Android where opening a BottomSheet from a focused text block (Paragraph, Heading) would cause the keyboard to not show up after the BottomSheet has been closed and the block was still selected. It was found using the Link picker but it happens with the block settings as well.

Step-by-step reproduction instructions

On an Android device/simulator

  1. Open the editor
  2. Add a Paragraph block
  3. Type some text
  4. Tap on the three dots to open the block settings
  5. See the keyboard getting dismissed and the BottomSheet opening
  6. Close the settings
  7. See the block is still selected but the keyboard didn't come back after closing the block settings BottomSheet

Expected behaviour

The Keyboard should be shown after the BottomSheet has been closed when the block is still selected. As it happens on the iOS platform.

Actual behaviour

The Keyboard stays hidden when the BottomSheet has been closed and the block is still selected.

Screenshots

Device information

  • Device: Pixel 3 Simulator and Redmi Note 8T
  • Operating system: Android 10
@geriux geriux added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Feb 4, 2021
@mchowning mchowning added [Type] Bug An existing feature does not function as intended [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later labels Feb 5, 2021
@kathrynwp
Copy link

Hi @dcalhoun - circling back to this issue, is it still occurring with the latest version of Gutenberg and WordPress? Thanks!

@dcalhoun
Copy link
Member

dcalhoun commented Aug 9, 2022

@kathrynwp yes, I was able to reproduce this on an Samsung Galaxy S20 (Android 12) with the WordPress 20.5 app.

dcalhoun added a commit that referenced this issue Oct 14, 2022
The focus callback triggered by Aztec-based programmatic focus events
can result in focus loops between rich text elements.

Android: This intentional no-op function prevents focus loops
originating when the native Aztec module programmatically focuses the
instance. The no-op is explicitly passed as an `onFocus` prop to avoid
future prop spreading from inadvertently introducing focus loops. The
user-facing focus of the element is handled by `onPress` instead.

See: wordpress-mobile/gutenberg-mobile#302

iOS: Programmatic focus from the native Aztec module is required to
ensure the React-based `TextStateInput` ref is properly set when focus
is *returned* to an instance, e.g. dismissing a bottom sheet. If the ref
is not updated, attempts to dismiss the keyboard via the `ToolbarButton`
will fail.

See: wordpress-mobile/gutenberg-mobile#702

The Android keyboard is, likely erroneously, already dismissed in the
contexts where programmatic focus may be required on iOS.

- #28748
- #29048
- wordpress-mobile/WordPress-Android#16167

Programmatic swapping focus from element to another often leads to focus
loops, only delegate the programmatic focus if there are no elements
focused.

See: wordpress-mobile/WordPress-iOS#18783
@geriux geriux self-assigned this Nov 9, 2022
geriux pushed a commit that referenced this issue Aug 2, 2023
The focus callback triggered by Aztec-based programmatic focus events
can result in focus loops between rich text elements.

Android: This intentional no-op function prevents focus loops
originating when the native Aztec module programmatically focuses the
instance. The no-op is explicitly passed as an `onFocus` prop to avoid
future prop spreading from inadvertently introducing focus loops. The
user-facing focus of the element is handled by `onPress` instead.

See: wordpress-mobile/gutenberg-mobile#302

iOS: Programmatic focus from the native Aztec module is required to
ensure the React-based `TextStateInput` ref is properly set when focus
is *returned* to an instance, e.g. dismissing a bottom sheet. If the ref
is not updated, attempts to dismiss the keyboard via the `ToolbarButton`
will fail.

See: wordpress-mobile/gutenberg-mobile#702

The Android keyboard is, likely erroneously, already dismissed in the
contexts where programmatic focus may be required on iOS.

- #28748
- #29048
- wordpress-mobile/WordPress-Android#16167

Programmatic swapping focus from element to another often leads to focus
loops, only delegate the programmatic focus if there are no elements
focused.

See: wordpress-mobile/WordPress-iOS#18783
geriux pushed a commit that referenced this issue Aug 2, 2023
The focus callback triggered by Aztec-based programmatic focus events
can result in focus loops between rich text elements.

Android: This intentional no-op function prevents focus loops
originating when the native Aztec module programmatically focuses the
instance. The no-op is explicitly passed as an `onFocus` prop to avoid
future prop spreading from inadvertently introducing focus loops. The
user-facing focus of the element is handled by `onPress` instead.

See: wordpress-mobile/gutenberg-mobile#302

iOS: Programmatic focus from the native Aztec module is required to
ensure the React-based `TextStateInput` ref is properly set when focus
is *returned* to an instance, e.g. dismissing a bottom sheet. If the ref
is not updated, attempts to dismiss the keyboard via the `ToolbarButton`
will fail.

See: wordpress-mobile/gutenberg-mobile#702

The Android keyboard is, likely erroneously, already dismissed in the
contexts where programmatic focus may be required on iOS.

- #28748
- #29048
- wordpress-mobile/WordPress-Android#16167

Programmatic swapping focus from element to another often leads to focus
loops, only delegate the programmatic focus if there are no elements
focused.

See: wordpress-mobile/WordPress-iOS#18783
geriux pushed a commit that referenced this issue Aug 3, 2023
* Mobile - Update changelog

* fix: Avoid iOS block appender focus loop

The focus callback triggered by Aztec-based programmatic focus events
can result in focus loops between rich text elements.

Android: This intentional no-op function prevents focus loops
originating when the native Aztec module programmatically focuses the
instance. The no-op is explicitly passed as an `onFocus` prop to avoid
future prop spreading from inadvertently introducing focus loops. The
user-facing focus of the element is handled by `onPress` instead.

See: wordpress-mobile/gutenberg-mobile#302

iOS: Programmatic focus from the native Aztec module is required to
ensure the React-based `TextStateInput` ref is properly set when focus
is *returned* to an instance, e.g. dismissing a bottom sheet. If the ref
is not updated, attempts to dismiss the keyboard via the `ToolbarButton`
will fail.

See: wordpress-mobile/gutenberg-mobile#702

The Android keyboard is, likely erroneously, already dismissed in the
contexts where programmatic focus may be required on iOS.

- #28748
- #29048
- wordpress-mobile/WordPress-Android#16167

Programmatic swapping focus from element to another often leads to focus
loops, only delegate the programmatic focus if there are no elements
focused.

See: wordpress-mobile/WordPress-iOS#18783

* fix: Programmatic Aztec input focus only updates internal ref

Programmatically swapping input focus creates an infinite loop if the
user taps a different input in between the programmatic focus and
the resulting update to the React Native TextInputState focused element
ref. To mitigate this, the Aztec now updates the focused element ref,
but does not call the native focus methods.

See: wordpress-mobile/WordPress-iOS#18783

* Mobile - AztecView - Check for isFocused before forcing the focus

* Mobile - DefaultBlockAppender and BlockList Footer placeholders - Removes inline functions and other minor code style changes

* Mobile - AztecView - Trigger _onFocus within _onAztecFocus to prevent having a RichText component focused while another block is selected

---------

Co-authored-by: David Calhoun <438664+dcalhoun@users.noreply.github.com>
geriux pushed a commit that referenced this issue Aug 3, 2023
* Mobile - Update changelog

* fix: Avoid iOS block appender focus loop

The focus callback triggered by Aztec-based programmatic focus events
can result in focus loops between rich text elements.

Android: This intentional no-op function prevents focus loops
originating when the native Aztec module programmatically focuses the
instance. The no-op is explicitly passed as an `onFocus` prop to avoid
future prop spreading from inadvertently introducing focus loops. The
user-facing focus of the element is handled by `onPress` instead.

See: wordpress-mobile/gutenberg-mobile#302

iOS: Programmatic focus from the native Aztec module is required to
ensure the React-based `TextStateInput` ref is properly set when focus
is *returned* to an instance, e.g. dismissing a bottom sheet. If the ref
is not updated, attempts to dismiss the keyboard via the `ToolbarButton`
will fail.

See: wordpress-mobile/gutenberg-mobile#702

The Android keyboard is, likely erroneously, already dismissed in the
contexts where programmatic focus may be required on iOS.

- #28748
- #29048
- wordpress-mobile/WordPress-Android#16167

Programmatic swapping focus from element to another often leads to focus
loops, only delegate the programmatic focus if there are no elements
focused.

See: wordpress-mobile/WordPress-iOS#18783

* fix: Programmatic Aztec input focus only updates internal ref

Programmatically swapping input focus creates an infinite loop if the
user taps a different input in between the programmatic focus and
the resulting update to the React Native TextInputState focused element
ref. To mitigate this, the Aztec now updates the focused element ref,
but does not call the native focus methods.

See: wordpress-mobile/WordPress-iOS#18783

* Mobile - AztecView - Check for isFocused before forcing the focus

* Mobile - DefaultBlockAppender and BlockList Footer placeholders - Removes inline functions and other minor code style changes

* Mobile - AztecView - Trigger _onFocus within _onAztecFocus to prevent having a RichText component focused while another block is selected

---------

Co-authored-by: David Calhoun <438664+dcalhoun@users.noreply.github.com>
geriux pushed a commit that referenced this issue Aug 3, 2023
* Release script: Update react-native-editor version to 1.100.1

* Release script: Update with changes from 'npm run core preios'

* Update `react-native-editor` changelog

* Release script: Update react-native-editor version to 1.100.2

* Release script: Update with changes from 'npm run core preios'

* Mobile - Fix iOS Focus loop for RichText components (#53217)

* Mobile - Update changelog

* fix: Avoid iOS block appender focus loop

The focus callback triggered by Aztec-based programmatic focus events
can result in focus loops between rich text elements.

Android: This intentional no-op function prevents focus loops
originating when the native Aztec module programmatically focuses the
instance. The no-op is explicitly passed as an `onFocus` prop to avoid
future prop spreading from inadvertently introducing focus loops. The
user-facing focus of the element is handled by `onPress` instead.

See: wordpress-mobile/gutenberg-mobile#302

iOS: Programmatic focus from the native Aztec module is required to
ensure the React-based `TextStateInput` ref is properly set when focus
is *returned* to an instance, e.g. dismissing a bottom sheet. If the ref
is not updated, attempts to dismiss the keyboard via the `ToolbarButton`
will fail.

See: wordpress-mobile/gutenberg-mobile#702

The Android keyboard is, likely erroneously, already dismissed in the
contexts where programmatic focus may be required on iOS.

- #28748
- #29048
- wordpress-mobile/WordPress-Android#16167

Programmatic swapping focus from element to another often leads to focus
loops, only delegate the programmatic focus if there are no elements
focused.

See: wordpress-mobile/WordPress-iOS#18783

* fix: Programmatic Aztec input focus only updates internal ref

Programmatically swapping input focus creates an infinite loop if the
user taps a different input in between the programmatic focus and
the resulting update to the React Native TextInputState focused element
ref. To mitigate this, the Aztec now updates the focused element ref,
but does not call the native focus methods.

See: wordpress-mobile/WordPress-iOS#18783

* Mobile - AztecView - Check for isFocused before forcing the focus

* Mobile - DefaultBlockAppender and BlockList Footer placeholders - Removes inline functions and other minor code style changes

* Mobile - AztecView - Trigger _onFocus within _onAztecFocus to prevent having a RichText component focused while another block is selected

---------

Co-authored-by: David Calhoun <438664+dcalhoun@users.noreply.github.com>

---------

Co-authored-by: Derek Blank <derekpblank@gmail.com>
Co-authored-by: Carlos Garcia <fluiddot@gmail.com>
Co-authored-by: David Calhoun <438664+dcalhoun@users.noreply.github.com>
@fluiddot
Copy link
Contributor

Close this issue as it has been fixed in #57069.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) [Priority] Low Used to indicate that the issue at hand isn't a top priority to address and can be handled later [Type] Bug An existing feature does not function as intended
Projects
Status: Done
Development

No branches or pull requests

5 participants