search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.56k stars 1.33k forks source link

[DataGrid] Slot `baseTextField` not rendering slot component #11226

Open Cnordbo opened 1 year ago

Cnordbo commented 1 year ago

Steps to reproduce

Link to live example: (required) https://codesandbox.io/p/sandbox/gallant-shockley-4sv8pp?file=%2Fsrc%2FDemo.tsx%3A55%2C1-56%2C1

Based on your "Validation" example

Steps:

  1. Setup a column of type "string" with a corresponding row, make it editable
  2. Override <DataGrid slots={{baseTextField: CustomInputComponent}} />

Expected result:

Actual:

Current behavior

Default component is still used

Expected behavior

CustomInputComponent to be used as text input

Context

Trying to use custom form input that matches our styleguide

Your environment

mui/x-data-grid-* v6.18.1 Browser: Edge

Search keywords: datagrid baseTextField slot is not rendering slot component Order ID: 78924

michelengelen commented 12 months ago

@cherniavskii not sure why this is not working. Could you please help here?

MBilalShafi commented 12 months ago

The baseTextField slot is not being used in the default component used to render edit cell. Instead, InputBase is directly used. https://github.com/mui/mui-x/blob/a71da3e7f191304444e855b8a228b0a843b1b45f/packages/grid/x-data-grid/src/components/cell/GridEditInputCell.tsx#L27

Could you use GridColDef.renderEditCell to override the default edit component instead? https://github.com/mui/mui-x/blob/a71da3e7f191304444e855b8a228b0a843b1b45f/packages/grid/x-data-grid/src/models/colDef/gridColDef.ts#L186-L191

Cnordbo commented 12 months ago

Could you use GridColDef.renderEditCell to override the default edit component instead?

We can. Slots would just be a lot easier.

We can do that until a fix is ready, as i would still assume that this is a bug.

cherniavskii commented 12 months ago

We shouldn't use baseTextField for GridEditInputCell though. How about we add the editCellInput slot for it?

Cnordbo commented 12 months ago

We shouldn't use baseTextField for GridEditInputCell though. How about we add the editCellInput slot for it?

Is baseCheckbox used for checkboxSelection? baseSelect used for filter dropdowns, baseTextField used for search etc? If thats the case, then yes, a new convention should be introduced for edit cells. And one could then be confused if your using both baseCheckbox and editCellCheckbox slots. Should editCellCheckbox respect baseCheckbox* if no editCellCheckbox is defined?

Seems like slots is not what i need to focus on atm. and rather override renderEditCell based on type.