Modal (useIonModal) not scrollable/swipeable in Android emulator

Ionic Framework
1

The sheet modal I’m displaying is not scrollable / swipeable in the Android emulator. Whether I hover and use the mouse scroll wheel or click-and-drag with the mouse, the sheet acts like it’s a “dismiss” gesture. But since there’s no 0 breakpoint and swipeToClose is implicitly false, the modal just re-appears. So I can’t get to the lower items in the modal list, or to the Cancel / Apply bottoms that are below the list.

The modal content is pretty simple (React):

  IonContent
    IonHeader
    list of IonItems
    IonFooter
      IonButton (Cancel)
      IonButton (Apply)

The code to obtain and display the modal is straightforward:

  const [showModal, dismissModal] = useIonModal(
    CategoryChooser,  // modal component
    { onDismiss: handleModalDismiss } // props to pass to modal component
  );

  const handleCategoryFilterButtonClick = () => {
    showModal({
      presentingElement: props.containingPage || undefined,
      initialBreakpoint: 0.9,
      breakpoints: [0.9],
      handle: false,
      showBackdrop: false,
      swipeToClose: false
    });
  };

Of course, scrolling/“swiping” works fine in a normal browser. But in the Android emulator, I can’t scroll/swipe. So I can’t test the functionality of the modal at all.

Keyboard action doesn’t work either. I can arrow down which highlights an item in the list, but that stops when it reaches the lowest visible IonItem.

This comment from the ion-modal docs implies that Ionic expects a “sheet” modal to be swipeable. But it’s not, at least in the Android emulator:

Note

Note: The swipeToClose property has no effect when using a sheet modal as sheet modals must be swipeable in order to be usable.

Is there a special way to accomplish the swiping in the emulator? Or is there a property I can set on the modal to make this work? Or is it a bug or a limitation of the emulator?

Thank you.

Ionic Info:

Ionic:

   Ionic CLI       : 6.19.0 (C:\Other Programs\nodejs\node_modules\@ionic\cli)
   Ionic Framework : @ionic/react 6.1.1

Capacitor:

   Capacitor CLI      : 3.4.3
   @capacitor/android : 3.4.3
   @capacitor/core    : 3.4.3
   @capacitor/ios     : 3.4.3

Utility:

   cordova-res : 0.15.4
   native-run  : 1.5.0

System:

   NodeJS : v16.14.2 (C:\Other Programs\nodejs\node.exe)
   npm    : 8.5.0
   OS     : Windows 10
2

In case this helps or anyone was going to ask the question…

I’ve tried a bunch of combinations with click/drag-to-swipe or with scroll wheel: ctrl/alt/shift. None of them work.

Alt+down arrow on the keyboard almost works. It will scroll to items below those initially visible. But the buttons at the bottom don’t display completely, though they are clickable.

3

Bump, and an update.

I’m running the app in an iOS emulator (under Xcode on a Mac, of course). I’m seeing the same inability to scroll with the modal displayed. In fact, it’s somewhat worse than on the Android emulator where at least Alt+down arrow on the keyboard would induce a scroll. On the iOS emulator, the only way I have to dismiss the modal is with the Esc key.

I could really use some help, if possible. Am I programmatically doing something wrong so that the component tree (see the original message) in the modal isn’t allowing or being able to handle the scroll?

Thanks much.

4

Another update…

I got the app installed on my iPhone. The scrolling problem exists there, too. So I can’t scroll the list that’s in the modal. And since there’s no keyboard on the real device (for this screen), I can’t even dismiss the modal.

I don’t have an Android device to test on, but given that the problem exists in: Android emulator; iOS emulator; and real iPhone device, I’m betting the problem exists on an Android device, too.

I have to think I’m doing something wrong, but I don’t know what it might be.

5

To solve this issue, I had to switch from a sheet modal to a card modal, compare this to the original message:

    showModal({
      presentingElement: props.containingPage || undefined,
      swipeToClose: false,
      handle: false,
      showBackdrop: true,
      cssClass: "category-chooser-modal"
    });

The biggest downside to this approach is that on Android the card modal covers the entire screen, which doesn’t match our UX high fidelities. But we understand that it’s a device behavior.

It really would be great if someone from Ionic could weigh in on this question. Are sheet modals expected to support/allow scrolling when, for example, there’s a list that’s taller than the modal’s height? If so, was I doing something wrong? Or is it a bug?

Thanks again.