[React]The background color set in the cell is cleared

yama-taku · 25 February 2022 08:05

Hi,

I tried after typing in a cell, I’m trying to select the correct value from modal.

When the value is temporary, the background color is set for the cell, but the color disappears when the modal is opened.
It seems that the TD tag of the cell is redrawn and the set class is cleared.

Please tell me how to keep the background color.

The modal didn’t work with jsFiddle, so here’s a demo.
https://react-handsontable-modal.netlify.app

My complete source is in this repository.

github.com

Yanchi4425/react-handsontable-modal/blob/master/src/App.tsx

import React from "react";
import { Modal } from "react-responsive-modal";
import "react-responsive-modal/styles.css";
import * as Hot from "@handsontable/react";
import "handsontable/dist/handsontable.full.css";

import "./App.css";

const SELECTION = ["Apple", "Microsoft", "Amazon", "Google"];
function App() {
    const hotRef = React.useRef<any>(null);
    const [modalShown, setModalShown] = React.useState(false);
    const [modalRow, setModalRow] = React.useState(0);
    const [modalCol, setModalCol] = React.useState(0);
    const [modalValue, setModalValue] = React.useState("");

    const fetchData = () => {
        if(!modalValue) return SELECTION;
        const regExp = new RegExp(modalValue + ".*", "g");
        return SELECTION.filter((x) => regExp.test(x));

This file has been truncated. show original

Thank you.

aleksandra_budnik · 25 February 2022 08:05

Hi @yama-taku

Did you already try to use

hotInstance.setCellMeta(row, col, 'className', 'invalid-cell');
hotInstance.render()

Instead of

hotInstance.getCell(row, col).classList.add("invalid-cell");

If not, please test that and let me know if it helps.

yama-taku · 25 February 2022 08:36

Hi @aleksandra_budnik

Yes, I have already tried it and confirmed that it doesn’t working.
The current repository and demo have been updated to call the setCellMeta method.

Thank you.

aleksandra_budnik · 25 February 2022 08:52

Could you tell me what are the exact requirements for this functionality? Maybe I will be able to specify another approach.

yama-taku · 25 February 2022 09:22

I need a like this.

Enter it manually in the cell.
Click the open button.
Search for the contents of a cell by prefix match using the API.
Shows the modal and shows the list retrieved from the API.
(At this time, it is necessary to display multiple data for one list like a table.)
When you click on the modally displayed value, set that value in the cell.
At this time, it is necessary to set the exact value obtained from the API, so it is necessary to change the background color so that it can be recognized as being manually entered.

I’m sorry for your inconvenience.Thank you for your cooperation.

aleksandra_budnik · 25 February 2022 10:55

Hey @yama-taku

It seems that the issue is more related to the state management than to the cellmeta themselves. Here https://github.com/handsontable/handsontable/issues/8372 is a topic on state management in Handsontable.

yama-taku · 25 February 2022 12:00

Hi @aleksandra_budnik

I will check it.
Thank you.

yama-taku · 28 February 2022 02:25

Hi @aleksandra_budnik .

In other words, do you need to update to ver12?
I’m using the free v6.2.2 as a hobby, so I’ll consider another approach.

Thank you.

aleksandra_budnik · 28 February 2022 11:18

Yes, the major changes will be added in the next version v12 planned for the 2nd week of March.

yama-taku · 1 March 2022 02:25

Hi @aleksandra_budnik .
I undertood.
It’s not cool, but I edit the DOM directly after closing the modal to apply the style.

Please close this ticket.
thank you.

aleksandra_budnik · 1 March 2022 08:37

Thank you for the update, @yama-taku
Please feel free to open a new ticket when needed or contact us directly via email at support@handsontable.com

aleksandra_budnik · 1 March 2022 08:37