Dropdown inside Dialog unable to scroll on touch screen

[FosterSamuel]

Environment Information

• Package version(s): 7.
• Browser and OS versions: Edge, Windows 10

Please provide a reproduction of the bug in a codepen:

https://codepen.io/powerchelle/pen/ExyXYzM

Actual behavior:

The dropdown is scrollable with a touch screen. However, when the dropdown is inside a Dialog, it is no longer scrollable using a touch screen.

Interestingly, a simulated touch screen via Device Emulation does not cause this problem. I am only able to reproduce it by physically touching the screen of my laptop.

Expected behavior:

To be able to scroll this dropdown inside the Dialog while using a touch screen.

Priorities and help requested:

Requested priority: Normal

[paulgildea]

@FosterSamuel Thanks for filing this issue! Also is this just specific to Windows machines or have you seen similar behavior on other touch devices?

[FosterSamuel]

Hi @paulgildea, thanks for looking into this. I've only seen this on my Windows touchscreen laptop and don't have other devices to test. I also cannot repro it from Device Emulation, which boggles me.

[joschect]

Hi @FosterSamuel This is caused by the way that we prevent IOS overscroll. You can override the behavior by adding allowTouchBodyScroll to the underlying modal. You can see it working in this codepen

[alonsh4]

I got a solution from @joschect (thanks).
Adding 'allowTouchBodyScroll: true' to the Dialog solved the problem. See example below:

  <Dialog
    hidden={hideDialog}
    onDismiss={toggleHideDialog}
    dialogContentProps={dialogContentProps}
    modalProps={{ allowTouchBodyScroll: true }}
  >
    <Dropdown
      options={options}
      styles={{ dropdownItems: { height: 200 } }}
    />
  </Dialog>

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.