[DataGrid] Sync date column value when entering edit mode by pressing a digit
#8364
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
m4theushw
added
the
component: data grid
Netlify deploy previewNetlify deploy preview: https://deploy-preview-8364--material-ui-x.netlify.app/ Updated pagesNo updates. These are the results for the performance tests:
|
cherniavskii
approved these changes
Mar 29, 2023
| @@ -98,24 +98,32 @@ function GridEditDateCell(props: GridEditDateCellProps) { | |||
| const ownerState = { classes: rootProps.classes }; | |||
| const classes = useUtilityClasses(ownerState); | |||
|
|
|||
| const hasUpdatedValueOnRender = React.useRef(false); | |||
There was a problem hiding this comment.
Suggested change
| const hasUpdatedValueOnRender = React.useRef(false); | |
| const hasUpdatedEditValueOnMount = React.useRef(false); |
Would this name better reflect what it's used for?
| @@ -145,9 +153,23 @@ function GridEditDateCell(props: GridEditDateCellProps) { | |||
| } | |||
| }, [hasFocus]); | |||
|
|
|||
| const meta = apiRef.current.unstable_getEditCellMeta(id, field); | |||
|
|
|||
| const handleInputRef = async (el: HTMLInputElement) => { | |||
There was a problem hiding this comment.
Suggested change
| const handleInputRef = async (el: HTMLInputElement) => { | |
| const handleInputRef = (el: HTMLInputElement) => { |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #8302
Preview: https://deploy-preview-8364--material-ui-x.netlify.app/x/react-data-grid/editing/#making-a-column-editable
The solution I implemented here was not what I intended to do in #8302 (comment). When a digit key is pressed, we update the input value to be equal to the key pressed. In a
type=dateinput, this updates the first date component, which could be the day or month, depending on the locale. Calling the value parser won't work because we don't know the date format (it's defined by the browser) to replace the right date component. The solution used here is a workaround involving callingsetEditCellValueas soon as the input is rendered and a digit key press was the reason for the cell to enter edit mode.