I'm working on a React project using Material-UI, and I've run into a challenge with input focus management within a dialog. My dialog consists of several input fields, and I want to alter the default behavior so that pressing the Enter key moves the focus to the next input field, much like how the Tab key works.
***version of material-ui : "@mui/material": "^5.13.5".*
// Component that renders my form dialog which is the one with the issue
// <AddInvoiceDialog> is not rendered directly because eventually will be other dialogs
import React from "react";
import { InteractionContext } from "../../hooks/ContextProvider";
import { useContext } from "react";
import Dialog from "@mui/material/Dialog";
import { useMediaQuery } from "@mui/material";
import React from "react";
import { InteractionContext } from "../../hooks/ContextProvider";
import { useContext } from "react";
import Dialog from "@mui/material/Dialog";
import { useMediaQuery } from "@mui/material";
import TableDialogComponent from "./TableDialogComponent";
import DialogsId from "../../helper/DialogsHelper";
import AlertDialog from "./AlertDialog";
import ConfirmDeleteDialog from "./ConfirmDeleteDialog";
import AddInvoiceDialog from "./AddInvoiceDialog";
import EditInvoiceDialog from "./EditInvoiceDialog";
import AddReceptionDialog from "./AddReceptionDialog";
import EditReceptionDialog from "./EditReceptionDialog";
import AddExpenseRecordDialog from "./AddExpenseRecord";
import EditExpenseRecordDialog from "./EditExpenseRecordDialog";
import DuplicateExpenseRecordDialog from "./DuplicateExpenseRecordDialog";
function switchDialogId(dialogId) {
switch (dialogId) {
case DialogsId.ADD_INVOICEDIALOG:
return <AddInvoiceDialog />;
// other cases
default:
return <NotFoundDialog />;
}
}
function MainDialog({ open }) {
const { setShowDialog, dialogTitle, dialogId } =
useContext(InteractionContext);
const handleCloseDialog = () => {
setShowDialog(false);
};
const matches = useMediaQuery("(min-width:600px)");
const getDialogWidth = () => {
switch (dialogId) {
//cases...
return "sm";
}
};
return (
<Dialog
onClose={handleCloseDialog}
open={open}
maxWidth={getDialogWidth()}
sx={{ overflow: "hidden" }}
title={dialogTitle}
>
{switchDialogId(dialogId)}
</Dialog>
);
}
export default MainDialog;
import React, { useEffect, useState } from "react";
import {
TextField,
Autocomplete,
DialogContent,
DialogTitle,
DialogActions,
Grid,
Divider,
Typography,
} from "@mui/material";
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Paper,
} from "@mui/material";
import DoneIcon from "@mui/icons-material/Done";
import CancelSharpIcon from "@mui/icons-material/CancelSharp";
import { SkeletonDictionary } from "../../helper/TablesHelper";
import { InteractionContext } from "../../hooks/ContextProvider";
import SpinnerComponent from "../stateless/SpinnerComponent";
import { DialogActionsDict } from "../../helper/DialogsHelper";
import { addSingleRecord, getAllTableData } from "../../utils/GlobalFunctions";
import { ProductSkeleton } from "../../skeletons/ProductSkeleton";
import { CustomerSkeleton } from "../../skeletons/CustomerSkeleton";
import InputAdornment from "@mui/material/InputAdornment";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DatePicker } from "@mui/x-date-pickers";
import DialogsId from "../../helper/DialogsHelper";
import dayjs from "dayjs";
function AddInvoiceDialog() {
const [selectedProducts, setSelectedProducts] = useState([]);
const [avaliableProducts, setAvailableProducts] = useState([]);
const [avaliableCustomers, setAvailableCustomers] = useState([]);
const [selectedCustomer, setSelectedCustomer] = useState(null);
const [loading, setLoading] = useState(false);
const [productQuantities, setProductQuantities] = useState({});
const [finalPrice, setFinalPrice] = useState({});
const [date, setDate] = useState(dayjs());
const {
tableId,
setShowDialog,
setDialogId,
dialogData,
setDialogData,
dialogTitle,
setIndexTableReload,
} = React.useContext(InteractionContext);
const handleProductChange = (event, newValues) => {
setSelectedProducts(newValues);
const newQuantities = newValues.reduce(
(acc, product) => ({
...acc,
[product.pCod]: productQuantities[product.pCod] || 1,
}),
{}
);
const newFinalPrice = newValues.reduce(
(acc, product) => ({
...acc,
[product.pCod]: finalPrice[product.pCod] || product.priceSale,
}),
{}
);
setFinalPrice(newFinalPrice);
setProductQuantities(newQuantities);
};
const handleCustomerChange = (event, newValue) => {
setSelectedCustomer(newValue);
};
const handleQuantityChange = (productId, event) => {
setProductQuantities({
...productQuantities,
[productId]: Number(event.target.value),
});
};
const handleFinalPriceChange = (productId, event) => {
setFinalPrice({
...finalPrice,
[productId]: event.target.value,
});
};
const adjustProductsToSendRequest = () => {
//[@check_legacy]
const productsToSend = selectedProducts.map((product) => ({
...product,
// In the line below we send the remaining stock of the product
inStock:
Number(avaliableProducts.find((i) => i.pCod === product.pCod).inStock) -
Number(productQuantities[product.pCod]),
// In the line below we send the final sale price of the product...
priceSale: Number(finalPrice[product.pCod]),
quantitySale: Number(productQuantities[product.pCod]),
}));
return productsToSend;
};
const buildInvoiceRequest = () => {
//[@check_legacy]
const calculateTotalItems = () => {
let totalItems = 0;
selectedProducts.forEach((product) => {
const quantity = Number(productQuantities[product.pCod]) || 1;
totalItems += quantity;
});
return Number(totalItems);
};
const calculateDiscount = () => {
let totalDiscount = 0;
selectedProducts.forEach((product) => {
const quantity = productQuantities[product.pCod] || 1;
const price = finalPrice[product.pCod] || product.priceSale;
totalDiscount += quantity * (product.priceSale - price);
});
return totalDiscount;
};
dialogData.customerId = selectedCustomer.cCod;
dialogData.date = date.format("YYYY-MM-DD");
dialogData.amount = totalAmount;
dialogData.itemQty = calculateTotalItems();
dialogData.status = 2;
dialogData.rdate = date.format("YYYY-MM-DD");
dialogData.discount = calculateDiscount();
const bodyrequest = {
invoice: dialogData,
products: adjustProductsToSendRequest(),
};
return bodyrequest;
};
const handleSuccessPost = (response) => {
//[@check_legacy]
setShowDialog(false);
setDialogId(DialogsId.ALERTDIALOG);
setDialogData({
message: `Successfully invoice added!`,
color: "success",
icon: <DoneIcon />,
actions: [{ text: "Ok", color: "success", callback: null }],
title: "Success",
});
setShowDialog(true);
};
const handleErrorPost = (error) => {
//[@check_legacy]
setDialogId(DialogsId.ALERTDIALOG);
setDialogData({
message: `Something went wrong!`,
color: "error",
icon: <CancelSharpIcon />,
actions: [{ text: "Ok", color: "error", callback: null }],
title: "Error",
});
};
const handlePost = async () => {
//[@check_legacy]
const bodyRequest = buildInvoiceRequest();
setLoading(true);
const response = await addSingleRecord(bodyRequest, tableId);
if (response.statusCode === 201) {
// status created
handleSuccessPost(response);
} else {
handleErrorPost(response);
}
setLoading(false);
setIndexTableReload((prev) => prev + 1);
};
useEffect(() => {
setLoading(true);
// fetch products and customers
const productsUrl = ProductSkeleton.endpoints.getAll;
const customersUrl = CustomerSkeleton.endpoints.getAll;
Promise.all([getAllTableData(productsUrl), getAllTableData(customersUrl)])
.then(([products, customers]) => {
setAvailableProducts(products);
setAvailableCustomers(customers);
setLoading(false);
})
.catch((error) => {
//TODO -> handle error, a global error variable should be valuated
setLoading(false);
});
}, []);
// Calculate total amount
const totalAmount = selectedProducts.reduce((total, product) => {
const quantity = productQuantities[product.pCod] || 1;
return total + quantity * finalPrice[product.pCod];
}, 0);
const labelForButton = (save) => (save ? "Add Invoice" : "Dismiss");
if (loading) {
return <SpinnerComponent></SpinnerComponent>;
}
return (
<>
<DialogTitle
id={`${SkeletonDictionary[tableId].identifier}-dialog`}
textAlign={"start"}
>
{dialogTitle}
</DialogTitle>
<DialogContent>
<Grid
container
spacing={2}
>
<Grid
item
xs={8}
>
<Autocomplete
className="my-2"
options={avaliableCustomers}
getOptionLabel={(option) => option.name}
onChange={handleCustomerChange}
renderInput={(params) => (
<TextField
{...params}
label="Select a customer"
variant="outlined"
/>
)}
/>
</Grid>
<Grid
item
xs={4}
>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
className=" w-100 my-2"
label="Date"
value={date}
onChange={(newDate) => setDate(newDate ? dayjs(newDate) : null)}
/>
</LocalizationProvider>
</Grid>
<Grid
item
xs={12}
>
<Divider
variant="middle"
style={{ backgroundColor: "rgba(0, 0, 0, 26)" }}
className="mx-0"
/>
<Typography
color="text.info"
variant="body2"
className="mt-2"
>
Add Products
</Typography>
</Grid>
<Grid
item
xs={8}
>
<Autocomplete
className="my-2"
multiple
options={avaliableProducts}
value={selectedProducts}
getOptionLabel={(option) => option.name}
onChange={handleProductChange}
renderInput={(params) => (
<TextField
{...params}
label="Select products by name"
variant="outlined"
/>
)}
/>
</Grid>
<Grid
item
xs={4}
>
<Autocomplete
className="my-2"
multiple
options={avaliableProducts}
value={selectedProducts}
getOptionLabel={(option) => String(option.pCod)}
onChange={handleProductChange}
renderInput={(params) => (
<TextField
{...params}
label="Select products by code"
variant="outlined"
/>
)}
/>
</Grid>
<Grid
item
xs={12}
>
<Typography
color="text.info"
variant="body2"
className="mb-2"
>
Products
</Typography>
<Divider
variant="middle"
style={{ backgroundColor: "rgba(0, 0, 0, 26)" }}
className="mx-0"
/>
</Grid>
<Grid
item
xs={12}
>
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>Product</TableCell>
<TableCell>Quantity</TableCell>
<TableCell>Stock</TableCell>
<TableCell>Price</TableCell>
<TableCell>Amount</TableCell>
</TableRow>
</TableHead>
<TableBody>
{selectedProducts.map((product) => {
const quantity = productQuantities[product.pCod] || 1;
const price = finalPrice[product.pCod] || product.priceSale;
const amount = quantity * price;
return (
<TableRow key={product.pCod}>
<TableCell
component="th"
scope="row"
>
{product.name}
</TableCell>
<TableCell>
<TextField
type="number"
size="small"
value={quantity}
onChange={(event) =>
handleQuantityChange(product.pCod, event)
}
inputProps={{ min: 1 }}
sx={{ width: "5vw" }}
/>
</TableCell>
<TableCell>{product.inStock}</TableCell>
<TableCell>
<TextField
type="number"
size="small"
value={price}
onChange={(event) =>
handleFinalPriceChange(product.pCod, event)
}
sx={{ width: "7vw" }}
InputProps={{
startAdornment: (
<InputAdornment position="start">
$
</InputAdornment>
),
}}
inputProps={{ min: 0.01 }}
></TextField>
</TableCell>
<TableCell>
${amount.toFixed(2)} {/* assuming price is a float */}
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
</Grid>
<Grid
item
xs={3}
>
<TextField
label="Total Amount"
value={`$${totalAmount.toFixed(2)}`}
size="small"
InputProps={{
readOnly: true,
}}
/>
</Grid>
<Grid
item
xs={9}
>
<DialogActions>
<button
className="btn btn-outline-success"
onClick={(event) => {
handlePost();
}}
>
{`${labelForButton(true)}`}
</button>
<button
className="btn btn-outline-dark mx-2"
onClick={(e) => setShowDialog(false)}
>
{`${labelForButton(false)}`}
</button>
</DialogActions>
</Grid>
</Grid>
</DialogContent>
</>
);
}
export default AddInvoiceDialog;
I suspect the issue might be related to how Material-UI handles focus within dialogs, but I'm not sure how to address this. Does anyone have suggestions or solutions for making the Enter key behave like the Tab key in this context? . Any suggestions on how to resolve this would be greatly appreciated.
I've set up a ref array to manage references to the input fields.
I've implemented a custom keypress handler to shift focus to the next input when the Enter key is pressed.
Despite these efforts, pressing Enter doesn't change the focus as expected. Every time that I press the enter key from one of my inputs components I can see the message 'Enter key pressed' from the console and there are not errors but the focus never happens.
The issue was with the bootstrap.js listener... removing it fixed it.