GithubHelp home page GithubHelp logo

When supporting the need for double check, a carriage return is required in a single text cell and onCellsChanged is triggered, changes become an array of one element, but a two-element array about reactgrid HOT 8 CLOSED

qiufeihong2018 avatar qiufeihong2018 commented on June 3, 2024
When supporting the need for double check, a carriage return is required in a single text cell and onCellsChanged is triggered, changes become an array of one element, but a two-element array

from reactgrid.

Comments (8)

qiufeihong2018 avatar qiufeihong2018 commented on June 3, 2024

focusLocation and CellEditorRenderer are different components for handling table focus and editing functions. If you call tryAppendChange twice in these two places, it's probably because you're trying to update the cell's value twice, which is probably not necessary in most cases.

In ReactGrid, tryAppendChange is commonly used to apply changes to cell values. This method attempts to add the change to the ReactGrid's change set, and if the change is successful, the onCellsChanged event is triggered, allowing you to process the change and update your data.

If you call tryAppendChange in focusLocation and CellEditorRenderer, the following behavior may result:

  • focusLocation calls tryAppendChange - When the focus moves to a cell, you might try to update the value of the cell.
  • CellEditorRenderer calls tryAppendChange - When the editor renders and the user changes the value, you might try to apply those changes.

Under normal circumstances, a change in focus triggered by you pressing Enter should not trigger a change in value.

const isMoveRightEnable = state.props? .moveRightOnEnter
? {... moveFocusRight(state, event.keyCode), currentlyEditedCell: undefined }
: {... moveFocusDown(state), currentlyEditedCell: undefined };

tryAppendChange should only be called once when the user finishes editing, that is, in the CellEditorRenderer.

{cellTemplate.render(currentlyEditedCell, true, (cell: Compatible<Cell>, commit: boolean) => {
state.currentlyEditedCell = commit ?  undefined : cell;
// console.log(state.queuedCellChanges, 'state.currentlyEditedCell')
if (commit) state.update(s => tryAppendChange(s, location, cell));
})}

from reactgrid.

Michota avatar Michota commented on June 3, 2024

I don't think I understand... Could you explain this in other words so that it is easier to understand and summarize what you expect?

from reactgrid.

qiufeihong2018 avatar qiufeihong2018 commented on June 3, 2024

May I ask whether the description of the problem is not clear or the solution is not clear

from reactgrid.

Michota avatar Michota commented on June 3, 2024

To be honest, i don't really see the issue here.
If i understand correctly, You mean that the issue is the fact that if user pressed Enter, yet there were no changes in cell, the "changes" are saved by tryAppendChange, even if there were no changes at all. Am I right?

from reactgrid.

Michota avatar Michota commented on June 3, 2024

Okay, now i realized that if you click Enter after editing the cell, the handleChanges in TestGrid.tsx will recive data as changes argument the same cell twice (as two separate objects). But it won't be the case if you will just un-focus (blur) the cell with mouse.
I still can't find any bug there. So what's wrong?

from reactgrid.

qiufeihong2018 avatar qiufeihong2018 commented on June 3, 2024

Okay, now i realized that if you click Enter after editing the cell, the handleChanges in TestGrid.tsx will recive data as changes argument the same cell twice (as two separate objects). But it won't be the case if you will just un-focus (blur) the cell with mouse. I still can't find any bug there. So what's wrong?

Yes, that's the problem. Whether it's enter after editing a cell or unfocusing a cell with the mouse, what's correct is that handleChanges in TestGrid.tsx receives data to the same cell once as a changes parameter.

from reactgrid.

Michota avatar Michota commented on June 3, 2024

For this moment i can't really see the issue here. Im trying to understand what is the problem, but tryAppendChange, as it name says, tries to append changes, but if there are no changes, it will leave cell as it is.

from reactgrid.

Michota avatar Michota commented on June 3, 2024

We (react-grid "team") talked for a while about the way you resolved this problem. We decided that there are not so many contraindications to your code, and the other ways around this problem are not backward compatible. For this reason, we decided to merge #292.
Keep in mind that this fix is not really permanent solution, as it may turn out to be invalid and cause bugs, and may be changed in the future. Once again: for this moment is sufficiently good.

from reactgrid.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.