scrollableElement error when double clicking cell

[hermantolim]

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;

[hermantolim]

I tested this one on MacOS and safari, it's working fine, but not in linux for chrome / firefox, it also happenned when you try to type something into the cell

[sidikfaha]

I got the same issue

[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]

Hello! As @sidikfaha posted, React's strict mode somehow breaks our logic.
We're going to investigate it, but for now please treat it as a temporary solution.
Thank you for your patience!

[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.

[imkitukov]

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.

Hey @czerwiukk,
any news on the next ReactGrid version, when we can expect a release for it, and where can follow the news for it?

[alonshmiel]

Hi,
I know a lot of developers were waiting for upgrading this amazing library to React 18.

So I have good news!!
I forked this library to my account and made the relevant changes in order to make it work in React 18.
I have tested it on my Mac but please test it also and verify everything works.

I updated React to 18, node-sass to sass and changed the config of rollup to use sass instead of node-sass.
So I succeeded to use this library with strict mode:

<React.StrictMode>
      <Grid...../>
</React.StrictMode>

I will make a PR for this library so the maintainers will be able to merge it to their library.

You can install my library by:

npm install git+https://github.com/alonshmiel/reactgrid.git

And then you can use the CSS by:

@import "@silevis/reactgrid/dist/styles.scss";
And the JS by:

import {
  ReactGrid,
  getCellProperty,
  getCharFromKeyCode,
  inNumericKey,
  isAllowedOnNumberTypingKey,
  isAlphaNumericKey,
  isNavigationKey,
  isNumpadNumericKey,
  keyCodes,
} from "@silevis/reactgrid/dist/core";

I faced with an error when using strict mode (can't access property "scrollableElement", t is undefined)
It was because of the strict mode.
React StrictMode calls reducer two times to eliminate any side-effects.
This error was thrown because the reducer didn't store the state so the second call didn't have the old state that it needs. That's why I stored the state.

Please open any issue you face with,
and I hope to maintain this library as much as I can since I'm gonna have a new baby boy in my family 💚