Uncaught TypeError: t.blur is not a function

[rahultjos]

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

• [X] I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[rahultjos]

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!

[shunyun-bp]

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();   <------------------------
    }
  };

[shunyun-bp]

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.

[shunyun-bp]

...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.

[KevinVandy]

I'll have time to address this bug this weekend, but a PR would speed it up a lot if you've already investigated

[shunyun-bp]

@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..)

[sdancer75]

for version 1.

            muiTableBodyCellEditTextFieldProps: ({ row, cell, table }) => ({
               onKeyDown: (event) => {
                  if (event.key === 'Enter') {
                     event.key = '';
                     // table.setEditingCell(null);
                  }
               },
            }),