[pickers] Console error about non-boolean attribute 'focused' when using DatePicker / DateTimePicker for custom columns in DataGrid

[wlee-vendelux]

The problem in depth

• Go to the section on Custom Columns in the docs
• Click on Edit in CodeSandbox
• Double click any date or datetime cell to start edit mode
• Press the calendar icon to open DatePicker or DateTimePicker
• Check dev console for error

Warning: Received `true` for a non-boolean attribute `focused`.
If you want to write it to the DOM, pass a string instead: focused="true" or focused={value.toString()}.

Your environment

No response

Search keywords: datepicker datetimepicker datagrid non-boolean focused
Order ID: 69589

[michelengelen]

Thanks for raising this @wlee-vendelux
I am not sure where exactly this attribute comes from @LukasTy ... From a quick investigation I guess it is this line that add the focused attribute to the DOM:

mui-x/packages/x-date-pickers/src/PickersTextField/PickersTextField.tsx

Line 120 in 971a48d

focused={focused}

Could it be that it gets passed down all the way to the InputBase component through props-spreading? 🤔

[flaviendelangle]

@michelengelen the component you linked does not exist in v6 and is not used by default in v7, it can't be the source of the problem

[michelengelen]

@michelengelen the component you linked does not exist in v6 and is not used by default in v7, it can't be the source of the problem

It is not? I am sorry! I will investigate this tomorrow a bit deeper!

[flaviendelangle]

In v6 we are using @mui/material/TextField 👍

[michelengelen]

Ok, I found the issue. The problem was that the WrappedGridEditDateInput got passed the focused prop, but it does not exist on InputBase which is being used in the demo.

You can change this by just removing focused from the props.

function WrappedGridEditDateInput(props: TextFieldProps) {
  const { InputProps, focused, ...other } = props;
  return <GridEditDateInput fullWidth {...InputProps} {...(other as InputBaseProps)} />;
}

@flaviendelangle Thanks for pointing that out. I searched in the wrong place! 🙇🏼

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @wlee-vendelux?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.