VirtualTable should support Select/Dropdown with scrolling lists

[tablesOHA]

• I have searched this repository's issues and believe that this is not a duplicate.

Current Behaviour

When using a select box in the VirtualTable with a list that is longer in height than the VirtualTable, scrolling in the list can cause rows to disappear.

In my application, A virtual table contains detail rows with editable tables. Some edit options use select boxes with 100+ options, which when opened, immediately cause the table to go blank. Smaller list (20+ options) allow you to scroll for a bit before the detail row is removed. Lists that fit in the table cause no issues.

Expected Behaviour

Should be able to use a scrolling select box within a VirtualTable.

Steps to Reproduce (for Bugs)

https://codesandbox.io/s/py117jw01j

Your Environment

devextreme-reactive: 1.0.2
react: 16.2
browser: Chrome, Firefox
bootstrap: none
react-bootstrap: none
material-ui: 1.0.0-beta.35

[kvet]

Hi,

I'm afraid that the issue is not related to the React Grid. The component from the react-select package doesn't support rendering inside scrolled elements. Here is the original issue: JedWatson/react-select#810 (comment)

[tablesOHA]

Thank you for the quick reply.

I have been messing with this off and on throughout the week, and while react-select may have additional issues, it appears any scrolling element within Virtual Table scrolls both the child element and the parent Virtual Table. I have tested with various dropdowns, textareas, and Material UIs own Select component.

This can be seen here with a simple textarea being rendered in a Table.Cell. As you scroll through the textarea, rows within the table will begin to drop.

[kvet]

Thank you for the report. We're going to fix it. Please bear with us.

[lock]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.