Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGridPro] can't use TextField in header #3599

Closed
2 tasks done
mnavoizat opened this issue Jan 12, 2022 · 11 comments · Fixed by #3624
Closed
2 tasks done

[DataGridPro] can't use TextField in header #3599

mnavoizat opened this issue Jan 12, 2022 · 11 comments · Fixed by #3624
Assignees
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module!

Comments

@mnavoizat
Copy link

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

In case you customize the DataGrid header with renderHeader and render a TextField, the TextField does not work, it is impossible to change its value.

Expected behavior 🤔

It should be possible to change TextField value.

Steps to reproduce 🕹

Repro: link to code sandbox

Steps:

  1. try to write something in the TextField in the header --> not possible

Context 🔦

I need custom TextFields in the header to perform a custom filtering.

Your environment 🌎

see code sandbox

Order ID 💳 (optional)

34462

@mnavoizat mnavoizat added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 12, 2022
@igor-serzhan
Copy link

I think this bug was introduced in this PR #3275, but not sure

@alexfauquette
Copy link
Member

Well done @igor-serzhan
The bug seems to come from this event.preventdefaults()
https://github.com/alexfauquette/material-ui-x/blob/e2376d22afba27f7aa32be49e30786532a75b2d0/packages/grid/_modules_/grid/hooks/features/keyboard/useGridKeyboardNavigation.ts#L164

Before it was applied to navigation keys, to prevent the page to scroll when pressing an arrow key. Now it is applied to every key, preventing the input text to be filled

@alexfauquette alexfauquette added bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 14, 2022
@alexfauquette alexfauquette self-assigned this Jan 14, 2022
@wahajStar
Copy link

may be this one would help you last 3 comment
I also face same issue
link

@alexfauquette
Copy link
Member

@mnavoizat If you need a quick fix, you can stop the propagation of the keyDown event
https://codesandbox.io/s/renderheadergrid-material-demo-forked-lwlw5?file=/demo.tsx

@jaballogian
Copy link

jaballogian commented Jan 17, 2022

I also face the same problem here
https://codesandbox.io/s/stackoverflow-mui-data-grid-render-header-xmwf0?file=/src/App.js
Please click the filter icon (top right of the Data Grid component) to show the Select and Text Field components
image

The problem might come from the controlled components (the Select and Text Field components that have value and on change props) inside the header of the Data Grid component.

If my statement above is true, this renderHeader case might be similar to this case https://stackoverflow.com/questions/70164306/mui-custom-text-field-loses-focus-on-state-change but I still haven't found the answer yet.

I have tried to add onKeyDown prop for the Text Field component but still got the same issue.

@alexfauquette
Copy link
Member

@jaballogian Your problem is not related to this issue. The solution 2 provided in the StackOverflow link you provided would solve your problem

@jaballogian
Copy link

@jaballogian Your problem is not related to this issue. The solution 2 provided in the StackOverflow link you provided would solve your problem

hello @alexfauquette
I have updated my comment above, sorry no to mention it before.
If you click the filter icon in the top right of the Data Grid component, the Text Field components in the Data Grid header will appear.

@alexfauquette
Copy link
Member

@jaballogian
Your problem is that you control the input from its parent. As you can see, when the onChange and value props are commented your problem disappears.

You can make your input controllable by defining it outside of its parent as explained in your StackOverflow link.

See the email filter input : https://codesandbox.io/s/stackoverflow-mui-data-grid-render-header-forked-jbkgt?file=/src/App.jsx

@jaballogian
Copy link

@jaballogian Your problem is that you control the input from its parent. As you can see, when the onChange and value props are commented your problem disappears.

You can make your input controllable by defining it outside of its parent as explained in your StackOverflow link.

See the email filter input : https://codesandbox.io/s/stackoverflow-mui-data-grid-render-header-forked-jbkgt?file=/src/App.jsx

wow great, you're right about defining the controlled components outside of its parent
thanks a lot

@oliviertassinari
Copy link
Member

This one feels like a regression, I recall we worked on this problem with @DanailH in the past https://github.com/mui-org/material-ui-x/pulls?q=is%3Apr+author%3ADanailH+is%3Aclosed+input

@oliviertassinari
Copy link
Member

@alexfauquette I knew I had already seen something on this problem. A duplicate of #1915?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants