Material UI select throws event.target.getAttribute is not a function when used from within react-datatable-component

Question

I am using the react-datatable-component (https://www.npmjs.com/package/react-data-table-component) and having custom cells as I want some fields to be editable.

However, I am facing a problem when using the Select field from material UI as it returns that "event.target.value" is not a function when the "onChange" event is triggered.

I created the following sandbox https://codesandbox.io/s/jolly-williams-3hiyj?file=/src/App.js:50-100 where you can see the problem after selecting an option.

Any ideas will be very much appreciated.

Thanks

bertdida bertdida · Accepted Answer · 2020-08-26T02:02:38

It seems that your issue is caused by this line on react-data-table-component's TableRow.js, it tries to do e.target.getAttribute('data-tag') when row is clicked.

But when you attach an onClick on material-ui's FormControl or Select component and console.log the event.target you'll get

{ value: 3, name: undefined }

The event.target is not an HTML element, but just an object with attributes value and name. Thus when react-data-table-component executes e.target.getAttribute('data-tag') it blows up.

Possible Solution

Attach an onClick handler to material-ui's FormControl or Select and stop the event's propagation

<FormControl onClick={(e) => e.stopPropagation()} >
...

Also note that, doing (the code below), will not change the selected value. You have to create a component for your Select column and put the selected value to state. I added these fixes to the codesandbox you can find below.

...
onChange={(event) => {
  row.pressTypeCode = event.target.value;
}}

PS: react-data-table-component has ignoreRowClick for columns but I'm not sure why it's not working for our code.

Material UI select throws event.target.getAttribute is not a function when used from within react-datatable-component

1 Answers