[Dialog] scrolling issue with react-select inside

Bug report

Current Behavior

I’m using a react-select component inside of a Dialog component, I had to add a pointer-events: auto to deal with visibility issue but now I’m facing a scrolling issue with my menu list.

Expected behavior

The mouse wheel should works well

Reproducible example

CodeSandbox Template

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dialog	0.1.5
React		17.0.2
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System

Issue Analytics

State:
Created 2 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

2reactions

davidavzcommented, Apr 28, 2022

My bad ! I didn’t know the behavior of this component when scrolling.

2reactions

davidavzcommented, Jan 31, 2022

The issue is present only when the list has a long overflow (I have a small screen but you should reproducing it adding more items on the list)

https://user-images.githubusercontent.com/6774576/151835451-fc415237-fecd-45ce-b90b-dc822dd5c948.mov

Top Results From Across the Web

react-select inside Radix Dialog scroll issue - CodeSandbox

Forked Fromreact-select inside Radix Dialog; Environmentcreate-react-app. Files. App.js. index.js. package.json. styles.css. Dependencies. @radix-ui/colors.

react - select causing page to scroll down - Stack Overflow

This problem is caused by the default value of the menuPosition prop being absolute . On a long dropdown list, the dropdown area...

How to fight the <body> scroll. First of all - Medium

In short — because sometimes you have to block all the interactions with the page. ... to explain why scroll should be blocked,...

DropDownList / How To / Close the popup on scroll - Syncfusion

Close the popup on scroll in React DropDownList component ... By using the hidePopup method in DropDownList, you can close the popup on...

Select - Examples - Components - Atlassian Design System

import React from 'react'; import Select from '@atlaskit/select'; ... <label htmlFor="single-select-example">What city do you live in?