text field one type and stop mui material

Question

so I have Texfield from Material UI, but i notice one things, every time i type, i stop and not continue to next letter, so i have to click again on it..., but when i remove the onChange method, the data continue to type without stopping..., is there because of the useEffect Component that prevent it from continously typing?

Here is my code:

import React from "react";
import { Search } from "@mui/icons-material";
import { IconButton, TextField, InputAdornment } from "@mui/material";
import {
  GridToolbarDensitySelector,
  GridToolbarContainer,
  GridToolbarExport,
  GridToolbarColumnsButton,
} from "@mui/x-data-grid";
import FlexBetween from "./FlexBetween";

const DataGridCustomToolbar = ({ searchInput, setSearchInput, setSearch }) => {
  return (
    <GridToolbarContainer>
      <FlexBetween width="100%">
        <FlexBetween>
          <GridToolbarColumnsButton />
          {/* <GridToolbarDensitySelector /> */}
          <GridToolbarExport />
        </FlexBetween>
        <TextField
          label="Search..."
          sx={{ mb: "0.5rem", width: "15rem" }}
          onChange={(e) => setSearchInput(e.target.value)}
          value={searchInput}
          variant="standard"
          InputProps={{
            endAdornment: (
              <InputAdornment position="end">
                <IconButton
                  onClick={() => {
                    setSearch({ value: searchInput });
                    setSearchInput("");
                  }}
                >
                  <Search />
                </IconButton>
              </InputAdornment>
            ),
          }}
        />
      </FlexBetween>
    </GridToolbarContainer>
  );
};

export default DataGridCustomToolbar;

Here is what its being use on the datagrid
const BOM = () => {
  const theme = useTheme();

  // values to be sent to the backend
  const [page, setPage] = useState(0);
  const [limit, setlimit] = useState(20);
  const [order, setOrder] = useState([
    {
      column: "1",
      dir: "asc",
    },
  ]);
  const [search, setSearch] = useState({
    value: "",
  });
  const [data, setData] = useState([]);
  const [total, setTotal] = useState(0);
  const setDataInput = (value) => {
    setDataInput(value);
  };
  useEffect(() => {
    dataService.getBomList(page, limit, order, search).then((response) => {
      console.log("BOM");
      setData(response.data.data.data);
      setTotal(response.data.data.recordsFiltered);
      return response.data.data.data;
    });
  }, [page, limit, order]);
  console.log(data);
  const [searchInput, setSearchInput] = useState("");

  const columns = [
    {
      field: "sku",
      headerName: "SKU",
      width: 100,
    },
    { field: "sku_name", headerName: "SKU NAME", width: 300 },
    {
      field: "plant",
      headerName: "Plant",
      width: 80,
      align: "center",
      headerAlign: "center",
    },
    { field: "base_qty", headerName: "Base QTY", width: 100 },
    {
      field: "item",
      headerName: "Item",
      width: 60,
      align: "center",
      headerAlign: "center",
    },
    { field: "uom_sku", headerName: "UOM SKU", width: 100, align: "center" },
    { field: "material", headerName: "Material", width: 150 },
    { field: "material_name", headerName: "Material Name", width: 300 },
    { field: "qty_material", headerName: "Material QTY", width: 100 },
    { field: "uom_material", headerName: "Material UOM", width: 100 },
    { field: "alt_bom", headerName: "BOM ALT", width: 80 },
    { field: "valid_from", headerName: "Valid From", width: 210 },
    { field: "valid_to", headerName: "Valid to", width: 210 },
    { field: "status", headerName: "Status", width: 80 },
  ];
  
  return (
    <Box m="5px">
      <Box height="80vh">
        {console.log("data", order, page, limit, search, searchInput)}
        <StripedDataGrid
          // loading={isLoading || !data}
          getRowId={(row) => row.id}
          columns={columns}
          rowCount={(limit && total) || 0}
          rowsPerPageOptions={[20, 50, 100]}
          rows={data || []}
          pagination
          paginationMode="server"
          sortingMode="server"
          page={page}
          pageSize={limit}
          onPageSizeChange={(newPageSize) => setlimit(newPageSize)}
          onPageChange={(newPage) => setPage(newPage)}
          onSortModelChange={(newSortModel) => setOrder(...newSortModel)}
          components={{ Toolbar: DataGridCustomToolbar }}
          componentsProps={{
            toolbar: { searchInput, setSearchInput, setSearch },
          }}
        />
      </Box>
    </Box>
  );
};
export default BOM;

Can someone tellme where did i do wrong here....

Answer 1

import React from "react";
import { Search } from "@mui/icons-material";
import { IconButton, TextField, InputAdornment } from "@mui/material";
import {
    GridToolbarDensitySelector,
    GridToolbarContainer,
    GridToolbarExport,
    GridToolbarColumnsButton,
} from "@mui/x-data-grid";
import FlexBetween from "./FlexBetween";

const DataGridCustomToolbar = ({ searchInput, onChange }) => {
    const handleChange = event => {
        const text = event.target.value;
        onChange(text);
    };
    return (
        <GridToolbarContainer>
            <FlexBetween width="100%">
                <FlexBetween>
                    <GridToolbarColumnsButton />
                    {/* <GridToolbarDensitySelector /> */}
                    <GridToolbarExport />
                </FlexBetween>
                <TextField
                    label="Search..."
                    sx={{ mb: "0.5rem", width: "15rem" }}
                    onChange={handleChange}
                    value={searchInput}
                    variant="standard"
                    InputProps={{
                        endAdornment: (
                            <InputAdornment position="end">
                                <IconButton
                                    onClick={() => {
                                        
                                        onChange("");
                                    }}
                                >
                                    <Search />
                                </IconButton>
                            </InputAdornment>
                        ),
                    }}
                />
            </FlexBetween>
        </GridToolbarContainer>
    );
};

export default DataGridCustomToolbar;

Something like that

  const BOM = () => {
    const theme = useTheme();

    // values to be sent to the backend
    const [page, setPage] = useState(0);
    const [limit, setlimit] = useState(20);
    const [order, setOrder] = useState([
        {
            column: "1",
            dir: "asc",
        },
    ]);
    const [search, setSearch] = useState({
        value: "",
    });
    const [data, setData] = useState([]);
    const [total, setTotal] = useState(0);
    const [searchInput, setSearchInput] = useState({ Text: "" });

    const setDataInput = (value) => {
        setDataInput(value);
    };

    const handleFieldChange = (value) => {
        if (value === "") {
            setSearch({ value: searchInput });
        }
        setSearchInput({ Text: value });
    };
    useEffect(() => {
        dataService.getBomList(page, limit, order, search).then((response) => {
            console.log("BOM");
            setData(response.data.data.data);
            setTotal(response.data.data.recordsFiltered);
            return response.data.data.data;
        });
    }, [page, limit, order]);
    console.log(data);


    const columns = [
        {
            field: "sku",
            headerName: "SKU",
            width: 100,
        },
        { field: "sku_name", headerName: "SKU NAME", width: 300 },
        {
            field: "plant",
            headerName: "Plant",
            width: 80,
            align: "center",
            headerAlign: "center",
        },
        { field: "base_qty", headerName: "Base QTY", width: 100 },
        {
            field: "item",
            headerName: "Item",
            width: 60,
            align: "center",
            headerAlign: "center",
        },
        { field: "uom_sku", headerName: "UOM SKU", width: 100, align: "center" },
        { field: "material", headerName: "Material", width: 150 },
        { field: "material_name", headerName: "Material Name", width: 300 },
        { field: "qty_material", headerName: "Material QTY", width: 100 },
        { field: "uom_material", headerName: "Material UOM", width: 100 },
        { field: "alt_bom", headerName: "BOM ALT", width: 80 },
        { field: "valid_from", headerName: "Valid From", width: 210 },
        { field: "valid_to", headerName: "Valid to", width: 210 },
        { field: "status", headerName: "Status", width: 80 },
    ];

    return (
        <Box m="5px">
            <Box height="80vh">
                {console.log("data", order, page, limit, search, searchInput)}
                <StripedDataGrid
                    // loading={isLoading || !data}
                    getRowId={(row) => row.id}
                    columns={columns}
                    rowCount={(limit && total) || 0}
                    rowsPerPageOptions={[20, 50, 100]}
                    rows={data || []}
                    pagination
                    paginationMode="server"
                    sortingMode="server"
                    page={page}
                    pageSize={limit}
                    onPageSizeChange={(newPageSize) => setlimit(newPageSize)}
                    onPageChange={(newPage) => setPage(newPage)}
                    onSortModelChange={(newSortModel) => setOrder(...newSortModel)}
                    components={{ Toolbar: DataGridCustomToolbar }}
                    componentsProps={{
                        toolbar: { searchInput, handleFieldChange },
                    }}
                />
            </Box>
        </Box>
    );
};
export default BOM;