Comments (8)
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.
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.
May I ask whether the description of the problem is not clear or the solution is not clear
from reactgrid.
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.
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.
Okay, now i realized that if you click Enter after editing the cell, the
handleChanges
inTestGrid.tsx
will recive data aschanges
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.
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.
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)
- v5 | bug: Newly focused cell may not be fully visible
- The custom Settings column is missing HOT 1
- Expect to add a drag handle column HOT 3
- Keyboard integration suggestions HOT 3
- Enhance user experience - Optimize the clipping effect: After clipping cells, the cells produce ant lines, showing the edited effect
- Focus next row when pressing Enter at the last row cell HOT 2
- Pasting an externally copied negative number into ReactGrid results in a positive number HOT 7
- @silevis reactgrid table full width not working HOT 4
- onSelectionChanging not called when column header is selected HOT 3
- Copying from excel results in an additional 0 and overrides the cell below HOT 2
- Edge Browser Displays Cell Borders Post 4.1.0 Update
- How to programmatically start editing a cell?
- Add a way to deselect rows from code HOT 3
- Mention the selectedRanges for handleContextMenu in the documentation HOT 7
- Export styles variable for Dropdown cells to allow for styling with tailwind classes HOT 2
- onSelectionChanged unusable with Typescript as Range and Location are not exported by package
- Discord invite link in social links is invalid HOT 1
- Event Handler assumes id is truthy HOT 3
- CSS Selector on input overrides material ui styles HOT 2
- How to put calculations on rows and columns? HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reactgrid.