javascriptreactjsmui-x-data-grid

onClick event not triggering on single click, but triggering on 2nd click

I'm using MUI DataGrid in React.js and passing some columns, including this one for performing actions. Everything works fine, and the icons display correctly. However, the onClick events are not consistently triggering on a single click. Sometimes they work on the first click, but other times I need to click twice. This issue affects all of the icon buttons. How can I resolve this?

Action Column

{
      flex: 0.1,
      minWidth: 150,
      sortable: false,
      field: "actions",
      headerName: "",
      renderCell: ({ row }) => (
        <Box>
          <IconButton color="primary" aria-label="View Details" tabIndex={0} title="View Details">
            <Icon icon='tabler:eye' onClick={ () => {navigate(`/employees/detail/${row.id}`);}} />
          </IconButton>
          <IconButton color="main" aria-label="Edit" tabIndex={0} onClick={() =>{handleEditEmployee(row.id)}} title="Edit">
            <Icon icon='tabler:pencil' />
          </IconButton>
          <IconButton color="error" aria-label="Delete" tabIndex={0} onClick={() =>{showConfirmation(row.id)}} title="Delete">
            <Icon icon="tabler:trash" />
          </IconButton>
        </Box>        
      ),
    }

MUI dependencies:

DataGrid:

<DataGrid
          editMode="row"
          autoHeight
          pagination
          rows={filteredRows}
          rowHeight={62}
          columns={columns}
          checkboxSelection
          pageSizeOptions={[5, 10]}
          disableRowSelectionOnClick
          paginationModel={paginationModel}
          onPaginationModelChange={setPaginationModel}
          onRowSelectionModelChange={(newSelectionModel) => {
            handleGridSelection(newSelectionModel);
          }}
          hideFooterSelectedRowCount
          getRowId={(row) => row.id}                                 
          processRowUpdate={(updatedRow, originalRow) => handleRowDataChange(updatedRow, originalRow)}
          onProcessRowUpdateError={handleProcessRowUpdateError}     
          sx={{
            '& .MuiDataGrid-columnHeaderTitle': {
              textTransform: 'none', // This will disable the capitalization
            },
          }} 
          slots={{
            noRowsOverlay: NoRowsOverlay,
          }} 
          initialState={{
            sorting: {
              sortModel: [{ field: 'Fullname', sort: 'asc' }],
            },
          }}   
        />

Handlers

const handleEditEmployee = (id) => {
    resetEmployee();
    let emp = getEmployeeById(id);    
    setEmployee(emp);
    setModalData({title:'Edit Employee', btnTxt:'Save Changes', successTitle:'Updated!', successTxt:'Employee information successfully updated.'})
    setOpenNewCustomerDlg(true);
  }
const handleDeleteEmployee = async (empID, Name) =>{    
      try {
        const result = await DeleteEmployee(empID,navigate);
        if (result && result.form) {
          console.error(result.form);
          console.log(result.form);
        } else {
          console.log('Employee deleted successfully!'); 
          Swal.fire(
            {
              title: 'Deleted!',
              text: `${Name} has been deleted.`,
              icon: 'success',
              confirmButtonColor: '#23a26d', 
            }         
          );
          fetchData();       
        }
      } catch (error) {
        console.error('Error deleting employee:', error);      
      }
  }

const showConfirmation = (id, Name) => {
MySwal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#23A26D',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'Cancel',
}).then((result) => {
  if (result.isConfirmed) {
    // Perform delete action here
    handleDeleteEmployee(id,Name);        
  }
});

};

Solution

  • Try to replace your action column by the following, I think that's the correct way:

    {
      field: 'actions',
      headerName: 'Actions',
      width: 150,
      type: 'actions',
      getActions: ({ id }) => [
        <GridActionsCellItem
          icon={<EyeIcon />}
          label="View Details"
          onClick={() => navigate(`/employees/detail/${id}`)}
          color="inherit"
        />,
        <GridActionsCellItem
          icon={<EditIcon />}
          label="Edit"
          onClick={() => handleEditEmployee(id)}
          color="inherit"
        />,
        <GridActionsCellItem
          icon={<DeleteIcon />}
          label="Delete"
          onClick={() => showConfirmation(id)}
          color="inherit"
        />,
      ],
},