Cannot enter any value on Filter Value Datagrid Material-UI in ReactJS

Question

There is a problem that in Material-UI DataGrid, I cannot enter or edit any value on filter value like below picture. Actually, it seems that the Filter value editable is disabled. It would be grateful if you help me to solve the problem. Tnx

The source code of it is:

         let columns = [


            { field: 'sensortype', headerName: 'SensorType', width: 140, hide: columnfilter.hidehabibsensortype },
            { field: 'height', headerName: 'Longitude', width: 130, hide: columnfilter.hidelongitude },
            { field: 'width', headerName: 'Latitude', width: 130, hide: columnfilter.hidelatitude },
            { field: 'altitude', headerName: 'Altitude', width: 130, hide: columnfilter.hidealtitude },
            { field: 'distance', headerName: 'Distance', width: 130, hide: columnfilter.hidedistance },
            { field: 'speed', headerName: 'Speed', width: 130, hide: columnfilter.hidespeed },
            { field: 'callsign', headerName: 'CallSign', width: 130, hide: columnfilter.hidecallsign },
            { field: 'squawk', headerName: 'Squawk', width: 130, hide: columnfilter.hidesquawk },
            { field: 'country', headerName: 'Country', width: 130, hide: columnfilter.hidecountry },

        ];

            logs && logs.length && logs.map((log, index) => (

               let row = {
                    id: index,
                    sensortype: log && log[0] && log[0].sensorTypeLatinName ? log[0].sensorTypeLatinName : '0',
                    height: log && log[0] && log[0].longitude ? log[0].longitude : '0',
                    width: log && log[0] && log[0].latitude ? log[0].latitude : '0',
                    altitude: log && log[0] && log[0].altitude ? log[0].altitude : '0',
                    distance: log && log[0] && log[0].distance ? log[0].distance : '0',
                    speed: log && log[0] && log[0].speed ? log[0].speed : '0',
                    squawk: log && log[0] && log[0].squawk ? log[0].squawk : '0',
                    callsign: log && log[0] && log[0].callsign ? log[0].callsign : '0',
                    country: log && log[0] && log[0].country ? log[0].country : '0',

                },

                rowss.push(row)

            ))

                            <div style={{ height: 230, width: '100%', direction: "rtl", }} className={classes.root}>
                                <DataGrid rows={rowss} columns={columns} components={{ Toolbar: GridToolbar }}

                                    pageSize={100} hideFooter hideFooterPagination density="compact" />
                            </div>

Answer 1

Add disableEnforceFocus to the Dialog component:

<Dialog disableEnforceFocus fullWidth maxWidth="xl" open={true} onClose={this.onClose}>
  <DialogTitle>Test Dialog Grid</DialogTitle>
  <DialogContent>
    <div style={{ backgroundColor: "white" }}>
      <DataGrid columns={columns} rows={rows} autoHeight />;
    </div>
  </DialogContent>
</Dialog>