1

why is onClick not working in material-ui option?

<Select native labelId="select-demo" id="status-select" value={value} displayEmpty onChange={handleChangeSelect} > <option aria-label="None" value="" disabled/> <option value={1} onClick={modalOpen}>Confirmed</option> <option value={2}>Preparing</option> <option value={3}>On the Way</option> <option value={4}>On the Way (Delayed)</option> <option value={5}>Completed</option> </Select>

And this is my modalOpen. I just wanted to try it with alert first before coding the modal.

 const modalOpen = (event) => { alert('Are you sure?'); }

And this is my updated code where onClick is already working but then I am also getting this error

SelectInput.js:342 Material-UI: You have provided an out-of-range value `false` for the select component. Consider providing a value that matches one of the available options or ''. The available values are `10`, `20`, `30`, `40`, `50`. const handleClickOpen = () => { setOpen(true); }; const handleClose = () => { setOpen(false); }; const handleChange = (event) => { const name = event.target.name; setState({ ...state, [name]: event.target.value, }); }; <FormControl> <Select labelId="select-demo" id="status-select" value={status} onChange={handleChange} > {/* <option aria-label="None" value="" disabled/> */} <MenuItem value ={10} onClick={handleClickOpen}>Confirmed</MenuItem> <MenuItem value ={20}>Preparing</MenuItem> <MenuItem value ={30}>On the Way</MenuItem> <MenuItem value ={40}>On the Way (Delayed)</MenuItem> <MenuItem value ={50}>Delivered</MenuItem> </Select> </FormControl>

And this is my dialog/modal that I used from material-ui:

 <Dialog open={open} onClose={handleClose} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description" > <DialogTitle id="alert-dialog-title">{"Order Status"}</DialogTitle> <DialogContent> <DialogContentText id="alert-dialog-description"> Set the order status to "Confirmed"? </DialogContentText> </DialogContent> <DialogActions> <Button onClick={handleClose} color="primary"> No </Button> <Button onClick={handleClose} color="primary"> Yes </Button> </DialogActions> </Dialog>
Improve this question
2

2 Answers 2

Reset to default
1

onChange is not supported by option

The workaround for this could be checking for selected option in your onChange handler

For example:

const handleChangeSelect = (event) => { const { value } = event.target; if (value == 2) alert('Are you sure?'); [the rest of your handler] }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

onClick is working fine:

const handleChange = (event) => { setAge(event.target.value); }; const handleClick = () => { window.confirm("Are you sure?") }; <Select native labelId="select-demo" id="status-select" displayEmpty value={age} onChange={handleChange} > <option aria-label="None" value="" disabled /> <option value={10} onClick={handleClick}> Ten </option> <option value={20}>Twenty</option> <option value={30}>Thirty</option> </Select>

Demo

Alternatively, you can achieve the same using handleChangeSelect (without using onClick):

 const handleChangeSelect = (event) => { if (event.target.value === 1) { if (window.confirm("Are you sure?")) { setOption(event.target.value); modalOpen() } } else { setOption(event.target.value); } };

Demo

Improve this answer

3 Comments

Thank you. I did follow the 2nd one with these codes and it worked. However, I'm getting this in the console "SelectInput.js:342 Material-UI: You have provided an out-of-range value false for the select component. Consider providing a value that matches one of the available options or ''. The available values are 1, 2."
I'm sorry I'm just new to stackoverflow. Do i just edit my original post then, I'll replace it with my updated codes?
thank you so much. I already updated the question

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.