Scrolling the contents of a <Select> popover placed over a <Table> will scroll the table as well

[ntamas]

Environment

• Package version(s): @blueprintjs/core 2.3.1, @blueprintjs/select 2.0.1, @blueprintjs/table 2.1.1
• Browser and OS versions: Firefox 60, macOS 10.13.5

Steps to reproduce

1. Create a Blueprint.js <Table> with lots of content so the table becomes scrollable.
2. Place a Blueprint.js <Select> component on top of it with a list of items; the list should be long enough to make the contents scrollable.
3. Open the <Select> component; make sure that the popover lies above the table.
4. Scroll the <Select> component with two-finger scrolling or with the mouse wheel.

Actual behavior

Both the contents of the popover and the table underneath it scroll at the same time. (Scrolling of the table is buggy on Firefox, but that's covered in #1712.

Expected behavior

Only the popover contents should scroll.

Possible solution

A workaround is to use the popoverRef prop of the Select to get a reference to the root div of the popover and then add an onwheel event handler (via direct DOM manipulation) that calls event.stopPropagation(). This could be the default for all Select instances.

[smithdalec]

I'm experiencing this as well, but only when using a scrollable element in a ColumnHeaderCell's menuRenderer (I'd assume it's a pretty common use-case to show a variable length list of filter options in that menu).
Here's a minimal repro:

<Table numRows={100}>
  <Column
    columnHeaderCellRenderer={() => (
      <ColumnHeaderCell
        name="Number"
        menuRenderer={() => (
          // Adding `onWheel={e => e.stopPropagation()}` to this div is the workaround
          <div style={{ height: 300, width: 200, overflowY: 'auto' }}>
            {Array.from({ length: 40 }).map((r, i) => (
              <div key={i}>Option {i}</div>
            ))}
          </div>
        )}
      />
    )}
    cellRenderer={i => <Cell>{i}</Cell>}
  />
</Table>

When building a Popover (constructed similarly to how ColumnHeaderCell does it) above the Table with the exact same contents, I don't experience the issue.

I'm using @blueprintjs/core@3.5.1 and @blueprintjs/table@3.1.1

[adidahiya]

closing in favor of newer related issue: #5469