Prevent pressing escape button - reactjs

Question

If I press escape button data will be saved to database. How to prevent user to submit data if user press escape button? Following code is from material ui Dialog component. I tried with e.keyCode === 27. In material ui e.keyCode === 27 is not working. I want to prevent user submitting data if they press escape button.
import React from 'react';
import Button from '#material-ui/core/Button';
import TextField from '#material-ui/core/TextField';
import Dialog from '#material-ui/core/Dialog';
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import DialogContentText from '#material-ui/core/DialogContentText';
import DialogTitle from '#material-ui/core/DialogTitle';
import {getCookie} from "../../../../actions/02 user/01 auth"
import { userInfoEdit,createUserProfile } from '../../../../actions/02 user/02 profile';
export default function FormDialog() {
const [open, setOpen] = React.useState(false);
const[name,setName] = React.useState(null)
const handleClickOpen = () => {
setOpen(true);
};
const token = getCookie("token")
const handleClose1 = ()=>{
setOpen(false)
}
const handleClose = async() => {
setOpen(false);
await userInfoEdit({name}, token); //api call
await createUserProfile(token,{name}) // api call
setName("");
};
return (
<div>
<Button size ="small" variant="outlined" color="primary" onClick={handleClickOpen}>
Edit
</Button>
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Edit Name</DialogTitle>
<DialogContent>
<DialogContentText>
Edit name
</DialogContentText>
<TextField
autoFocus
label="Name"
value={name}
type="name"
margin="normal"
onChange={(e)=>setName(e.target.value)}
variant="outlined"
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose1} color="primary">
Cancel
</Button>
<Button onClick={handleClose} color="primary"
disabled={name ? name.length <= 6:!name}
>
Submit
</Button>
</DialogActions>
</Dialog>
</div>
);
}

Answer 1

Why you are giving handleClose function for Submit and onClose. Give separately like below.
export default function FormDialog() {
const [open, setOpen] = React.useState(false);
const[name,setName] = React.useState(null)
const handleClickOpen = () => {
setOpen(true);
};
const token = getCookie("token")
const handleClose1 = ()=>{
setOpen(false)
}
const popupClose = () => {
setOpen(false);
}
const submitHandleClose = async() => {
popupClose();
await userInfoEdit({name}, token); //api call
await createUserProfile(token,{name}) // api call
setName("");
};
return (
<div>
<Button size ="small" variant="outlined" color="primary" onClick={handleClickOpen}>
Edit
</Button>
<Dialog open={open} onClose={popupClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Edit Name</DialogTitle>
<DialogContent>
<DialogContentText>
Edit name
</DialogContentText>
<TextField
autoFocus
label="Name"
value={name}
type="name"
margin="normal"
onChange={(e)=>setName(e.target.value)}
variant="outlined"
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={popupClose} color="primary">
Cancel
</Button>
<Button onClick={submitHandleClose} color="primary"
disabled={name ? name.length <= 6:!name}
>
Submit
</Button>
</DialogActions>
</Dialog>
</div>
);
}