ionic-framework: bug: sheet modal gesture breaks when interacting with inputs/keyboard on ios

Prequisites

I have read the Contributing Guidelines.
I agree to follow the Code of Conduct.
I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v4.x
v5.x
v6.x

Current Behavior

I just tested the new Sheet Modal. First: Great work 🎉 Here is a Collections of things i mentioned:

Similar to #23561: My IDEA (InteliJ) seems to not know the new properties like breakpoints or initialBreakpoint. Maybe missing in the angular component declaration?
The handle can not be set to false for Sheet Modals: https://github.com/ionic-team/ionic-framework/blob/9fa373c6efeceb39913f1c158cda383c38cba29c/core/src/components/modal/modal.tsx#L550
The handle itself doesn’t looks nice in combination with IonTitle - Looks like it needs a bit more spacing here
The Backdrop seems to be a bit buggy yet, see video: After drag finished it changes:
When i have an Input inside the Sheet Modal and focus it the Keyboard appears and the Modal pushs up a bit. After losing the focus of the input and the keyboard is gone, the breakpoints do not work anymore and i’m kind of in a free mode where i can stop the Modal wherever i want
Where we already talk about that: This freeMode would be a cool feature
Also it would be great to be able to disable the possibility to drag the Modal and add the possibility to change the current breakpoint programatically.

Expected Behavior

Everything is described above

Steps to Reproduce

Version: 6.0.0-beta.5

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

No response

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 4
Comments: 15 (14 by maintainers)

Commits related to this issue

fix(modal): native keyboard will dismiss when bottom sheet is dragged Resolves #23878 Co-authored-by: EinfachHans <hanskrywaa@web.de> — committed to ionic-team/ionic-framework by sean-perkins 2 years ago
fix(modal): native keyboard will dismiss when bottom sheet is dragged Resolves #23878 Co-authored-by: EinfachHans <hanskrywaa@web.de> — committed to ionic-team/ionic-framework by sean-perkins 2 years ago
fix(modal): native keyboard will dismiss when bottom sheet is dragged Resolves #23878 Co-authored-by: EinfachHans <hanskrywaa@web.de> — committed to ionic-team/ionic-framework by sean-perkins 2 years ago
fix(modal): native keyboard will dismiss when bottom sheet is dragged Resolves #23878 Co-authored-by: EinfachHans <hanskrywaa@web.de> — committed to ionic-team/ionic-framework by sean-perkins 2 years ago
fix(modal): native keyboard will dismiss when bottom sheet is dragged (#24642) Resolves #23878 Co-authored-by: EinfachHans <hanskrywaa@web.de> — committed to ionic-team/ionic-framework by sean-perkins 2 years ago

Most upvoted comments

@liamdebeasi FYI, looks like the canStart of the sheet gesture is called when an input inside of the sheet style modal is clicked and the keyboard opens 🤔

Additional to that, i guess it would make sense to close open keyboards when start dragging by adjusting the canStart:

const canStart = (detail: GestureDetail) => {
  /**
   * If the sheet is fully expanded and
   * the user is swiping on the content,
   * the gesture should not start to
   * allow for scrolling on the content.
   */
  const content = (detail.event.target! as HTMLElement).closest('ion-content');

  if (currentBreakpoint === 1 && content) {
    return false;
  }

  const activeElement = baseEl.ownerDocument!.activeElement as HTMLElement;
  if (activeElement && activeElement.matches('input,ion-input, ion-textarea')) {
    activeElement.blur();
  }

  return true;
};

EinfachHans on Jan 19, 2022

Some updates on this:

IDE issue is resolved via https://github.com/ionic-team/ionic-framework/pull/23899
Handle position is resolved via https://github.com/ionic-team/ionic-framework/pull/23901
Disabling handle is resolved via https://github.com/ionic-team/ionic-framework/pull/23900
Backdrop animation when breakpoints does not include 1 is resolved via https://github.com/ionic-team/ionic-framework/pull/23927

The above 4 fixes will be available in an upcoming Ionic v6 beta.

The “bounce” you mentioned in https://github.com/ionic-team/ionic-framework/issues/23878#issuecomment-916126140 will be tracked in https://github.com/ionic-team/ionic-framework/issues/22120 since it also impacts card modals. Programmatically moving the breakpoint is currently being discussed in another thread you have (https://github.com/ionic-team/ionic-framework/issues/23917).

I am going to convert this thread to focus on the remaining issue which is the sheet gesture breaking when Interacting with the keyboard/inputs.

liamdebeasi on Sep 14, 2021