popper cant close when switching between toggle button

Viewed 16

I am using the Material Ui Toggle button component, which have Monthly and Weekly two buttons. Both using the same component, the popper will show only if the selected button is weekly.

My problem is when I open the popper in the weekly type, without close it, after that I choose monthly, the popper will show somewhere else in the page (not the same position that show in weekly type).

Not sure what's wrong with it.

Here's my code:

  <IconButton onClick={(event) => _handleOpenCalendar(event)}>
    <InsertInvitation />
  </IconButton>

  <Popper
    open={openCalendar}
    anchorEl={anchorEl}
    modifiers={{
      flip: {
        enabled: true,
      },
    }}
  >
<Box sx={{ border: 1, p: 2, bgcolor: "background.paper" }}>
  <DateRangePicker
    inputFormat="dd/MM/yyyy"
    startText="Start Date"
    endText="End Date"
    value={selectedDate?.[currentIdx]}
    onChange={(newValue) => _handleChangeDate(newValue)}
    maxDate={new Date()}
    renderInput={(startProps, endProps) => (
      <React.Fragment>
        <TextField {...startProps} helperText="" label="" />
        <DateRangeDelimiter> to </DateRangeDelimiter>
        <TextField {...endProps} helperText="" label="" />
      </React.Fragment>
    )}
  />
  <Box
    style={{
      marginTop: 5,
      display: "flex",
      justifyContent: "flex-end",
    }}
  >
    <Button
      variant="outlined"
      color="primary"
      onClick={_handleChangeDateCancel}
      style={{ marginRight: 5 }}
    >
      Cancel
    </Button>
    <Button
      variant="contained"
      color="primary"
      onClick={_handleChangeDateOK}
    >
      OK
    </Button>
  </Box>
</Box>
const _handleChangeDateOK = () => {
    setOpenCalendar(false);
    setAnchorEl(null);
  };


const _handleChangeDateCancel = () => {
  setOpenCalendar(false);
  setAnchorEl(null);
  };

const _handleOpenCalendar = (event) => {
    setAnchorEl(event.currentTarget);
    setOpenCalendar((previousOpen) => !previousOpen);
  };

Codesandbox url: https://codesandbox.io/s/keen-grass-mg803l?file=/demo.tsx

0 Answers
Related