Open rahultjos opened 1 week ago
Due to this issue, tabbed focus in the table was lost reducing accessibility. Fixed it in code by adding onKeyDown in muiEditTextFieldProps to throw { message: "Pls press shift+enter instead of enter" } if event.key==="Enter" && !event.shiftKey Not sure if this fix is elegant enough. Hope this error will be fixed. Thanks!
Ran into this when defining column for a table in cell editing mode.
eventColumnHelper.accessor("integration_type", {
header: "Integration Type",
size: 190,
editVariant: "select",
editSelectOptions: integrationTypes,
muiEditTextFieldProps: ({ row, cell, table }) => ({
select: true,
error: !!validationErrors?.state,
helperText: validationErrors?.state,
onChange: (event) => {
logger.info("onChange event:", event);
logger.info("editInputrefs:", table.refs.editInputRefs);
handleSaveEventUpdate({
...row.original,
[cell.column.id]: event.target.value,
});
},
}),
}),
editInputrefs.current["integration_type"] is an object that includes a focus function, node (input.MuiSelect-nativeInput.css-yf8vq0-MuiSelect-nativeInput), and value. No blur property, though the error says that blur is not a function.
This error is occuring in the MRT_EditCellTextField.handleEnterKeyDown function:
const handleEnterKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
textFieldProps.onKeyDown?.(event);
if (event.key === 'Enter' && !event.shiftKey && completesComposition) {
editInputRefs.current[column.id]?.blur(); <------------------------
}
};
Follow-up: This bug affects EVERY cell edit component where editVariant is "select". A temporary workaround is to add an onKeyDown event that forces the shift key true, bypassing the attempt to execute blur():
onKeyDown: (event) => {
if (event.key === "Enter" && !event.shiftKey)
event.shiftKey = true;
},
This forces the select back into a "selection" mode, thereby forcing the user to use the mouse or tab key to move to a different cell.
...actually stumbled on a better temporary solution:
onKeyDown: (event) => {
if (event.key === "Enter" && !event.shiftKey) {
event.shiftKey = true;
table.setEditingCell(null);
}
},
That actually exits editing mode.
I'll have time to address this bug this weekend, but a PR would speed it up a lot if you've already investigated
@KevinVandy I think it needs your investigation. I think that setEditingCell(null) is only a short-term fix and prevents other down-stream affects. I suspect that the MUI "native" component is still just a wrapper and the ref is not quite right (just a guess..)
material-react-table version
3.0.1
react & react-dom versions
18.3.1
Describe the bug and the steps to reproduce it
Open page https://www.material-react-table.com/docs/guides/editing#crud-examples Keep the Console open in the browser Click Edit icon Select drop down in State Use keyboard up/down arrow to select another state and press enter Console will give error Uncaught TypeError: t.blur is not a function
Minimal, Reproducible Example - (Optional, but Recommended)
Uncaught TypeError: t.blur is not a function at onKeyDown (3310-c4d103efeafa1b70.js:1:54305) at Object.eU (framework-c6c82aad00023883.js:1:15005) at eH (framework-c6c82aad00023883.js:1:15159) at framework-c6c82aad00023883.js:1:33465 at re (framework-c6c82aad00023883.js:1:33564) at rn (framework-c6c82aad00023883.js:1:33978) at framework-c6c82aad00023883.js:1:39434 at oP (framework-c6c82aad00023883.js:1:96349) at eF (framework-c6c82aad00023883.js:1:14143) at ro (framework-c6c82aad00023883.js:1:35269)
Screenshots or Videos (Optional)
Do you intend to try to help solve this bug with your own PR?
No, because I do not know how
Terms