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;
}

[pka420]

ref

Could you please explain this solution?

[EvgeniaMarch]

ref

Could you please explain this 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;
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);
};

Explanation of the handleFocusLocationChanged Functionality
The code snippet contains a function named handleFocusLocationChanged, which is designed to manage the focus location within a ReactGrid component. Its primary purpose is to reposition the cell editor to align with a specific cell in the grid based on user interaction or programmatic changes to focus.

1. Locating Column and Row:
   The function begins by determining the column index based on the columnId provided in the location parameter. This is done using the findIndex method on the columns array, which returns the index of the column that matches the specified columnId.
   For the row index, it checks if there is a header row by looking for a row with the rowId of 'header'. If such a row exists, the function increments the row ID by 1 to account for the header being excluded from regular data rows. If no header exists, it simply uses the provided rowId.

2. Querying the Cell Element:
   Next, the function utilizes querySelector to find the specific cell element in the DOM. It constructs a selector string that uses the data attributes data-cell-rowidx and data-cell-colidx to uniquely identify the cell based on its row and column indices.

3. Retrieving and Applying Styles:
   Once the cell element is located, the function retrieves its computed styles using window.getComputedStyle. This retrieves the left and top positions of the cell, which are essential for placing the cell editor accurately.
   The positions are then set as CSS custom properties (--cell-editor-position-x and --cell-editor-position-y) on the document's body. This allows for dynamic updates to the CSS variables without needing to define absolute values in the stylesheets.

4. Integrating with ReactGrid:
   The function is passed as a prop to the ReactGrid component under the onFocusLocationChanged attribute. This integration ensures that whenever the focus location changes within the grid, the handleFocusLocationChanged function gets executed with the new location, updating the editor's position accordingly.

CSS Positioning:
To ensure that the cell editor (which has a CSS class of rg-celleditor rg-inputNumber-celleditor) is positioned correctly based on the dynamically set CSS variables, the CSS uses position: absolute with top and left properties tied to the previously defined custom properties. This results in the editor appearing precisely over the focused cell.

How to Use This in Your Project:
To use this functionality in your own project, you would first need to ensure that your ReactGrid supports an event like onFocusLocationChanged. You would then implement a similar handleFocusLocationChanged function, adapting it to fit your column and row structure, as well as ensure that the appropriate CSS is applied to the cell editor. This approach provides a seamless user experience when editing grid cell values.