Modal (useIonModal) not scrollable/swipeable in Android emulator

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):

    list of IonItems
      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 = () => {
      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: 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 CLI       : 6.19.0 (C:\Other Programs\nodejs\node_modules\@ionic\cli)
   Ionic Framework : @ionic/react 6.1.1


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


   cordova-res : 0.15.4
   native-run  : 1.5.0


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

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.

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.

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.

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

      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.