How can I trigger the onCllick with material-ui option?

Question

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>

I tried to reproduce the error - `Material-UI: You have provided ..`, but could not. Try this https://codesandbox.io/s/material-demo-forked-0qg42?file=/demo.js And check [MaterialUI Select set value is always out of range](https://stackoverflow.com/q/60813040/2873538) — Ajeet Shah, Mar 03 '21 at 18:22

Ajeet Shah · Answer 1 · 2021-03-01T10:14:57.037

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

edited Mar 01 '21 at 10:14

answered Mar 01 '21 at 09:45

Ajeet Shah

18,551
8
57
87

1

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`." – JS3 Mar 02 '21 at 02:36
1

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? – JS3 Mar 03 '21 at 02:16
1

thank you so much. I already updated the question – JS3 Mar 03 '21 at 07:02

score 1 · Answer 2 · answered Mar 01 '21 at 09:47

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]
}

How can I trigger the onCllick with material-ui option?

2 Answers2