[DataGridPro] <input> in header, conflicts with column reordering & sorting

[Bidrman]

I am not even sure if it's a bug, but it seems to me that it might be. When I choose to have a custom column header with draggable columns (sortable: true). Then it makes a bunch of problems.

https://codesandbox.io/s/material-demo-forked-2gtom?file=/demo.tsx

Current Behavior 😯

Draggable functionality propagates everywhere and I cant even mark the text in the input.

Expected Behavior 🤔

ideally, stop all propagation from elements that were custom made.

Steps to Reproduce 🕹

sorter: true,
titleRender: () => (
                    <div>
                        <div>
                            <strong>{translate(column.name)}</strong>
                        </div>
                        <div
                            onClick={(event: any) => event.stopPropagation()}
                            onDrag={(event: any) => event.stopPropagation()}
                        >
                            <input
                                onDrag={(event: any) => event.stopPropagation()}
                                onFocus={(event: any) => event.stopPropagation()}
                            />
                        </div>
                    </div>
                ),

rest of a Datagrid is standard so just use any other

Steps:

1. try to write into the input.. it works due to stopPropagation method
2. try to mark text written in the input without dragging whole column

PLease provide some guidance how to fix this behaviour

[oliviertassinari]

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[Bidrman]

I have tried this https://codesandbox.io/s/material-demo-forked-2gtom?file=/demo.tsx with the information provided. I don't get it.

well frist of all you need ideally more columns, at least 2, and one problem is already visible there. When you write a text into that input, then you wanna seelct text inside that input (value), you realize you cant, because drag and drop will be propagated and yo ustart moving whole column. But thats not a wanted effect I assume. I tried to put soem eynthetic events there to stop propagation, but its still not working as desired.

None of these events stops the drag and drop
onDrag={(event: any) => event.stopPropagation()}
onFocus={(event: any) => event.stopPropagation()}
onMouseDown={(event: any) => event.stopPropagation()}

[Bidrman]

here is forked code, where you can imitate/reproduce what I described

https://codesandbox.io/s/material-demo-forked-02qke

writ soem text into wedding input and then try to mark the input value from left to right, and oyu drag whoel columen towards the birthday column.

I hope its better explained now

[dtassone]

If you want to disable column reordering, you can use the disableColumnReorder prop.
Also I believe you set the events on the input itself hence why it doesn't stop the propagation, it needs to be on the header element. ATM it would be quite tricky to do it. You would need to get the header element via the api and add event listeners on it.

[Bidrman]

If you want to disable column reordering, you can use the disableColumnReorder prop.
Also I believe you set the events on the input itself hence why it doesn't stop the propagation, it needs to be on the header element. ATM it would be quite tricky to do it. You would need to get the header element via the api and add event listeners on it.

I want to have reordering enabled, but it has to stay disabled in the area of input

[Bidrman]

disableColumnReorder

I just checked disableColumnReorder and its not present on XGrid page https://material-ui.com/api/data-grid/x-grid/ as an acceptable parameter, do you know why is that?

[DanailH]

@Bidrman we missed it when we were updating the docs. It will be there after the next release. It will work for XGrid.

[DanailH]

Ok after a short investigation - the problem is not with the event but rather with the HTML API here https://github.com/mui-org/material-ui-x/blob/master/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx#L211

Basically, we currently lack the option to make a single column not draggable. Maybe it's time to add that option in the column definition?

[Bidrman]

Ok after a short investigation - the problem is not with the event but rather with the HTML API here https://github.com/mui-org/material-ui-x/blob/master/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx#L211

Basically, we currently lack the option to make a single column not draggable. Maybe it's time to add that option in the column definition?

@DanailH I dont need it just for single column, but for that input, we use columnHeaders as filter via those inputs (textfields) and currently those inputs are not fully operational due to these drag and drop issues.

disableColumnReorder fixes the problem with marking the text in the input but I just noticed another bug there, so I probbaly make new issue here. I am still able to reorder columns if I set disableColumnReorder to true.

[oliviertassinari]

I am still able to reorder columns if I set disableColumnReorder to true.

This a known bug/regression: #1762

---

@Bidrman To clarify it, could you confirm if we get the problem right? You want the column headers to be draggable. Your problem is that end users can't interact with the input when it's rendered in the header. You don't want the input to interfere with the sorting, nor reordering features of the header.

[Bidrman]

I am still able to reorder columns if I set disableColumnReorder to true.

This a known bug/regression: #1762

@Bidrman To clarify it, could you confirm if we get the problem right? You want the column headers to be draggable. Your problem is that end users can't interact with the input when it's rendered in the header. You don't want the input to interfere with the sorting, nor reordering features of the header.

@oliviertassinari Indeed #1762 is the problem that I was reffering. after marking title you are able to change the order. this of course happens not just in title only. Cells are vulnerable to this behaviour too. You just need to mark text in 2 cells, then drag them aside and you see some show.

[Bidrman]

@dtassone @oliviertassinari @oliviertassinari just to let you know, I just created a fix of this issue. you just need to create

const [staticColumn, setStatic] = useState(false);

in your component and through this you can actually control disableColumnReorder={staticColumn}. last part is just adding synthetic events on the input onFocus => setStatic(true) and onBlur => setStatic(false).

after this it works like a charm. maybe this can be implemented as a fix, perhaps??

[dtassone]

@Bidrman sounds like a good workaround. Are you able to provide a codesandbox maybe?

[oliviertassinari]

Are you able to provide a codesandbox maybe?

@Bidrman as well as how you solve the click sorting issue 👍

[Bidrman]

@dtassone @oliviertassinari will do, once im back from holiday. dont have my laptop with me

[oliviertassinari]

@Bidrman Ok. I had a quick look. This seems to solve perfectly the problem:

        <span
          draggable="true"
          onDragStart={(event) => {
            event.stopPropagation();
            event.preventDefault();
          }}
          onClick={(event) => {
            event.stopPropagation();
          }}
        >

https://codesandbox.io/s/material-demo-forked-bgyj7?file=/demo.tsx

Maybe it should be in the docs, https://material-ui.com/components/data-grid/columns/#column-reorder but maybe not, it's overkill.

[dtassone]

We can add a demo about how stopPropagation works taking the header component with an input as demo, maybe we could put it on the events page?

[Bidrman]

@Bidrman Ok. I had a quick look. This seems to solve perfectly the problem:

        <span
          draggable="true"
          onDragStart={(event) => {
            event.stopPropagation();
            event.preventDefault();
          }}
          onClick={(event) => {
            event.stopPropagation();
          }}
        >

https://codesandbox.io/s/material-demo-forked-bgyj7?file=/demo.tsx

Maybe it should be in the docs, https://material-ui.com/components/data-grid/columns/#column-reorder but maybe not, it's overkill.

@oliviertassinari its almost identical as my solution I created, I just used more verbous syntax. But it was the only solution that worked for me. Something about the propagation could be added into docs, I am sure it would help other users to save time and some nerves haha.

[dmh143]

@oliviertassinari Have you tried the above code sandbox in Firefox?

Im a DataGridPro developer - we need to support Firefox users and this text selection came up for us. It does work for Chrome and Safari but all text selection on the input is disabled in Firefox.

I haven't dug into the specifics of why this is broken in Firefox, if I get anything working I will post back

[Bidrman]

@dmh143 Indeed the example from https://codesandbox.io/s/material-demo-forked-bgyj7?file=/demo.tsx is not working in new firefox version (91.3). However my fix still working

[m4theushw]

@Bidrman There's bug report on Firefox exactly about that: https://bugzilla.mozilla.org/show_bug.cgi?id=739071

To provide an alternative solution I took a different path. Instead of preventing the default behavior of the drag events I tried to change draggable=false once the input is clicked. It seems to work on Firefox too.

CodeSandbox: https://codesandbox.io/s/material-demo-forked-xujt1g?file=/demo.tsx:186-796

renderHeader: () => (
  <strong>
    {"Birthday "}
    <span
      onMouseDown={(event) => {
        event.target
          .closest(".MuiDataGrid-columnHeaderDraggableContainer")
          .setAttribute("draggable", false);
      }}
      onMouseUp={(event) => {
        event.target
          .closest(".MuiDataGrid-columnHeaderDraggableContainer")
          .setAttribute("draggable", true);
      }}
      onClick={(event) => {
        event.stopPropagation();
      }}
    >
      <input />
    </span>
  </strong>
)

---

I don't think we should do anything to support out-of-box inputs as column headers in the DataGridPro. While a custom header with an input shouldn't trigger dragging, a normal div element should still allow dragging. We can't have a list of non-draggable elements.

To close this issue and to document the possible solution I think we could invest time to add a demo in https://mui.com/components/data-grid/filtering/ with inputs as column headers, where each input allows to filter the respective column. Similar to #2842 but for columns.

[MBilalShafi]

We now have a Header filters functionality to be leveraged in use cases where the intent is to allow quick filtering or possibly add a custom 2nd header row.
Documentation to refer to: https://mui.com/x/react-data-grid/filtering/#header-filters

Closing this issue now.