Cell Editor is rendering off of the spreadsheet in a modal

[tMathaiou]

I have a spreadsheet inside a modal but when I try to edit a field it does not align, it seems that it is getting top left from the document rather than the parent element.

Your environment details

• Device: desktop
• OS: windows
• Browser chrome

[Sturez]

Hi, I'm having the same issue. as @tMathaiou wrote, it looks like is using wrong reference for top/left, instead of using the current parent's ones.

[tMathaiou]

@Sturez It seems the problem is that it uses a fixed position for the input, and if your modal has any CSS transition translate, it loses the top left. If you remove the transition, it should work, but in my case, I can't remove the transition; I need it.

[webloopbox]

In version 5.0.0-alpha, we have removed the fixed cell during editing, so it aligns correctly regardless of the parent element's position.

[kaushal795]

Hi @webloopbox, I'm facing the same issue event after overriding the position:"fixed" with abosoulte/relative its still off of the correct position. Is there any example reference which can be followed to resolve this issue for version 4.

[EvgeniaMarch]

I have a solution

const handleFocusLocationChanged = (location) => {
    const colId = columns.findIndex((col) => col.columnId === location.columnId);
    const rowId = rows.find((row) => row.rowId === 'header') ? Number(location.rowId) + 1 : location.rowId;
    recalculateCellEditorPosition(colId, rowId, reactGridRef);
  };
  const focus = ref?.current?.state?.reactGridElement?.querySelector(
    `[data-cell-rowidx="${rowId}"][data-cell-colidx="${colId}"]`
  );
  const focusStyles = window.getComputedStyle(focus);
  document.body.style.setProperty('--cell-editor-position-x', focusStyles.left);
  document.body.style.setProperty('--cell-editor-position-y', focusStyles.top);
  
<ReactGrid
          ref={reactGridRef}
          rows={rows}
          columns={columns}
          onFocusLocationChanged={handleFocusLocationChanged}
        />

and scss:

      div.rg-celleditor.rg-inputNumber-celleditor {
position: absolute !important;
top: var(--cell-editor-position-y) !important;
left: var(--cell-editor-position-x) !important;
}