Skip to content

Commit 2689869

Browse files
oliviertassinarioliviertassinari
committed
use a form element
1 parent fb9f4e9 commit 2689869

File tree

2 files changed

+98
-64
lines changed

2 files changed

+98
-64
lines changed

‎docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js

Lines changed: 49 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ export default function FreeSoloCreateOptionDialog() {
2929
year: '',
3030
});
3131

32-
const handleAdd = () => {
32+
const handleSubmit = event => {
33+
event.preventDefault();
3334
setValue({
3435
title: dialogValue.title,
3536
year: parseInt(dialogValue.title, 10),
@@ -43,6 +44,18 @@ export default function FreeSoloCreateOptionDialog() {
4344
<Autocomplete
4445
value={value}
4546
onChange={(event, newValue) => {
47+
if (typeof newValue === 'string') {
48+
// timeout to avoid instant validation of the dialog's form.
49+
setTimeout(() => {
50+
toggleOpen(true);
51+
setDialogValue({
52+
title: newValue,
53+
year: '',
54+
});
55+
});
56+
return;
57+
}
58+
4659
if (newValue && newValue.inputValue) {
4760
toggleOpen(true);
4861
setDialogValue({
@@ -87,37 +100,41 @@ export default function FreeSoloCreateOptionDialog() {
87100
)}
88101
/>
89102
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
90-
<DialogTitle id="form-dialog-title">Add a new film</DialogTitle>
91-
<DialogContent>
92-
<DialogContentText>Did you miss any film in our list? Please, add it!</DialogContentText>
93-
<TextField
94-
autoFocus
95-
margin="dense"
96-
id="name"
97-
value={dialogValue.title}
98-
onChange={event => setDialogValue({ ...dialogValue, title: event.target.value })}
99-
label="title"
100-
type="text"
101-
fullWidth
102-
/>
103-
<TextField
104-
margin="dense"
105-
id="name"
106-
value={dialogValue.year}
107-
onChange={event => setDialogValue({ ...dialogValue, year: event.target.value })}
108-
label="year"
109-
type="number"
110-
fullWidth
111-
/>
112-
</DialogContent>
113-
<DialogActions>
114-
<Button onClick={handleClose} color="primary">
115-
Cancel
116-
</Button>
117-
<Button onClick={handleAdd} color="primary">
118-
Add
119-
</Button>
120-
</DialogActions>
103+
<form onSubmit={handleSubmit}>
104+
<DialogTitle id="form-dialog-title">Add a new film</DialogTitle>
105+
<DialogContent>
106+
<DialogContentText>
107+
Did you miss any film in our list? Please, add it!
108+
</DialogContentText>
109+
<TextField
110+
autoFocus
111+
margin="dense"
112+
id="name"
113+
value={dialogValue.title}
114+
onChange={event => setDialogValue({ ...dialogValue, title: event.target.value })}
115+
label="title"
116+
type="text"
117+
fullWidth
118+
/>
119+
<TextField
120+
margin="dense"
121+
id="name"
122+
value={dialogValue.year}
123+
onChange={event => setDialogValue({ ...dialogValue, year: event.target.value })}
124+
label="year"
125+
type="number"
126+
fullWidth
127+
/>
128+
</DialogContent>
129+
<DialogActions>
130+
<Button onClick={handleClose} color="primary">
131+
Cancel
132+
</Button>
133+
<Button type="submit" color="primary">
134+
Add
135+
</Button>
136+
</DialogActions>
137+
</form>
121138
</Dialog>
122139
</React.Fragment>
123140
);

‎docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx

Lines changed: 49 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ export default function FreeSoloCreateOptionDialog() {
2828
year: '',
2929
});
3030

31-
const handleAdd = () => {
31+
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
32+
event.preventDefault();
3233
setValue({
3334
title: dialogValue.title,
3435
year: parseInt(dialogValue.title, 10),
@@ -41,6 +42,18 @@ export default function FreeSoloCreateOptionDialog() {
4142
<Autocomplete
4243
value={value}
4344
onChange={(event: any, newValue: FilmOptionType | null) => {
45+
if (typeof newValue === 'string') {
46+
// timeout to avoid instant validation of the dialog's form.
47+
setTimeout(() => {
48+
toggleOpen(true);
49+
setDialogValue({
50+
title: newValue,
51+
year: '',
52+
});
53+
});
54+
return;
55+
}
56+
4457
if (newValue && newValue.inputValue) {
4558
toggleOpen(true);
4659
setDialogValue({
@@ -84,37 +97,41 @@ export default function FreeSoloCreateOptionDialog() {
8497
)}
8598
/>
8699
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
87-
<DialogTitle id="form-dialog-title">Add a new film</DialogTitle>
88-
<DialogContent>
89-
<DialogContentText>Did you miss any film in our list? Please, add it!</DialogContentText>
90-
<TextField
91-
autoFocus
92-
margin="dense"
93-
id="name"
94-
value={dialogValue.title}
95-
onChange={event => setDialogValue({ ...dialogValue, title: event.target.value })}
96-
label="title"
97-
type="text"
98-
fullWidth
99-
/>
100-
<TextField
101-
margin="dense"
102-
id="name"
103-
value={dialogValue.year}
104-
onChange={event => setDialogValue({ ...dialogValue, year: event.target.value })}
105-
label="year"
106-
type="number"
107-
fullWidth
108-
/>
109-
</DialogContent>
110-
<DialogActions>
111-
<Button onClick={handleClose} color="primary">
112-
Cancel
113-
</Button>
114-
<Button onClick={handleAdd} color="primary">
115-
Add
116-
</Button>
117-
</DialogActions>
100+
<form onSubmit={handleSubmit}>
101+
<DialogTitle id="form-dialog-title">Add a new film</DialogTitle>
102+
<DialogContent>
103+
<DialogContentText>
104+
Did you miss any film in our list? Please, add it!
105+
</DialogContentText>
106+
<TextField
107+
autoFocus
108+
margin="dense"
109+
id="name"
110+
value={dialogValue.title}
111+
onChange={event => setDialogValue({ ...dialogValue, title: event.target.value })}
112+
label="title"
113+
type="text"
114+
fullWidth
115+
/>
116+
<TextField
117+
margin="dense"
118+
id="name"
119+
value={dialogValue.year}
120+
onChange={event => setDialogValue({ ...dialogValue, year: event.target.value })}
121+
label="year"
122+
type="number"
123+
fullWidth
124+
/>
125+
</DialogContent>
126+
<DialogActions>
127+
<Button onClick={handleClose} color="primary">
128+
Cancel
129+
</Button>
130+
<Button type="submit" color="primary">
131+
Add
132+
</Button>
133+
</DialogActions>
134+
</form>
118135
</Dialog>
119136
</React.Fragment>
120137
);

0 commit comments

Comments
 (0)