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

fix(modal): native keyboard will dismiss when bottom sheet is dragged #24642

Merged
merged 2 commits into from
Jan 25, 2022

Conversation

sean-perkins
Copy link
Contributor

@sean-perkins sean-perkins commented Jan 24, 2022

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Build (npm run build) was run locally and any changes were pushed
  • Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

The swipe gesture for the modal bottom sheet will trigger when a form element (input, textarea, etc.) receives focus and opens the native keyboard. This causes the sheet gesture to become unresponsive and free scroll.

Issue Number: Resolves #23878

What is the new behavior?

  • Swipe gestures will be disabled when the keyboard is immediately open (form element has focus).
  • Swipe gestures will be re-enabled on the next frame (after the keyboard has repositioned the view)
  • The swipe gesture for the sheet modal will dismiss any active keyboards (this aligns with native behavior, see: Maps sheet implementation on iOS)

Does this introduce a breaking change?

  • Yes
  • No

Other information

Before After
modal-sheet-before.mp4
modal-sheet-after.mp4

Behavior is easier to feel on device than from a video:

  1. Update the sheet example test to render an <ion-input></ion-input> for each item
  2. Run Core
  3. Open the test on your mobile device
  4. Present the modal sheet and play with the gesture, breakpoints and keyboard focus

@sean-perkins sean-perkins requested a review from a team as a code owner January 24, 2022 19:19
@github-actions github-actions bot added the package: core @ionic/core package label Jan 24, 2022
@EinfachHans
Copy link
Contributor

@sean-perkins amazing!! Looks good so far 😊 Dev build would be awesome to test it in a dev app

Copy link
Contributor

@averyjohnston averyjohnston left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, nice work 👍

@sean-perkins
Copy link
Contributor Author

@sean-perkins amazing!! Looks good so far 😊 Dev build would be awesome to test it in a dev app

@EinfachHans The dev build version is 6.0.4-dev.1643056868.324d279.

i.e.:

npm i @ionic/[email protected]

Copy link
Contributor

@EinfachHans EinfachHans left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sean-perkins works as expected! 😊

@sean-perkins sean-perkins merged commit 525f01f into main Jan 25, 2022
@sean-perkins sean-perkins deleted the FW-190 branch January 25, 2022 16:28
/* tslint:disable-next-line */
if (typeof document !== 'undefined') {
const activeElement = baseEl.ownerDocument.activeElement as HTMLElement;
if (activeElement.matches('input,ion-input,textarea,ion-textarea')) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, I am a bit late but why don't we focus the ion-modal instead? If someone is using contenteditable this is still going to break.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug: sheet modal gesture breaks when interacting with inputs/keyboard on ios
4 participants