Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 2 years ago
Reactions:4
Comments:15 (14 by maintainers)

Top GitHub Comments

1reaction

EinfachHanscommented, Jan 19, 2022

@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;
};

1reaction

liamdebeasicommented, Sep 14, 2021

Some updates on this: