inovua / reactdatagrid

Empower Your Data with the best React Data Grid there is
https://reactdatagrid.io
Other
3.45k stars 57 forks source link

columnContextMenuConstrainTo not contrained to selected element #421

Open guergana opened 2 weeks ago

guergana commented 2 weeks ago

What you did:

I have the following code... which is targeting the element that I want, but when testing with a file with many columns, the submenu is not constrained to this element, but to the whole document.

  const dataGridElement = document.querySelector('.InovuaReactDataGrid')?.closest('.parent__element')

  return (
    <InovuaDatagrid
      dataSource={source}
      columns={columns}
      pagination={true}
      style={{ height: '100%', border: 'none' }}
      showColumnMenuLockOptions={false}
      showColumnMenuGroupOptions={false}
      columnContextMenuConstrainTo={dataGridElement}
      columnContextMenuPosition={"fixed"}
    />

PR where this can be reproduced: https://github.com/okfn/opendataeditor/pull/428/files

I have opted to use columnContextMenuConstrainTo={true} in the meantime since constraining to a selected Element is not working.

What happened:

image

Problem description:

columnContextMenuConstrainTo doesn't constrain the menu within the selected element when columnContextMenuPosition={"fixed"}

The result is the same if columnContextMenuConstrainTo is set to true or if it's set to the dataGridElement in my example. The columns submenu should be restrained to the top of the menu and not into the blue background.