scrollableElement error when double clicking cell

Describe the bug when double clicking cell tables gone and this error message show up ‘can’t access property “scrollableElement”, t is undefined’

Current behavior the table gone and error message show up

Expected behavior should be able to edit the cell

Screenshots or gifs

Your environment details

• Device: Desktop
• OS: Arch Linux
• Browser: Firefox, Google Chrome

Step to produce

• completely follow the getting started guide

• yarn create react-app --template typescript

• yarn install @silevis/reactgrid

• HERE IS THE App.tsx

import React from "react";
import "./App.css";

import {Cell, Column, ReactGrid, Row} from "@silevis/reactgrid";
import "@silevis/reactgrid/styles.css";

interface Person {
    name: string;
    surname: string;
}

const getPeople = (): Person[] => [
    {name: "Thomas", surname: "Goldman"},
    {name: "Susie", surname: "Quattro"},
    {name: "", surname: ""}
];

const getColumns = (): Column[] => [
    {columnId: "name", width: 150},
    {columnId: "surname", width: 150}
];

const headerRow: Row = {
    rowId: "header",
    cells: [
        {type: "header", text: "Name"},
        {type: "header", text: "Surname"}
    ]
};

const getRows = (people: Person[]): Row[] => [
    headerRow,
    ...people.map<Row>((person, idx) => ({
        rowId: idx,
        cells: [
            {type: "text", text: person.name},
            {type: "text", text: person.surname}
        ]
    }))
];

function Grid() {
    const [people] = React.useState<Person[]>(getPeople());
    const rows = getRows(people);
    const columns = getColumns();

    return (
        <div>
            {   // @ts-ignore
                (<ReactGrid columns={columns} rows={rows} />)
            }
        </div>
    )
}
function App() {
    return (
        <div className="App">
            <Grid />;
        </div>
    );
}

export default App;

[sidikfaha]

I fixed it by removing my <App /> component into the <React.StrictMode> tags.

Old index.tsx :

import React from 'react';
import ReactDOM from 'react-dom/client';
import "@silevis/reactgrid/styles.css";
import './styles/app.css';
import App from './views/App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

New index.tsx (working) :

import React from 'react';
import ReactDOM from 'react-dom/client';
import "@silevis/reactgrid/styles.css";
import './styles/app.css';
import App from './views/App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
    <App />
);

reportWebVitals();

[czerwiukk]

We’re currently building the next version of ReactGrid from the ground up and decided to leave this topic in the current state. If you want to use the current version, disable the strict mode while using React 18.