[FIXED] Types of parameters 'event' and 'event' are incompatible

Issue

I have a project, which is an employee monitoring project, and it has several components, and among these components is having a group of buttons together.

I have a set of buttons, and I call these buttons in another component, but when I write the code, I have this one error.

Type '(event: React.MouseEvent<Document, MouseEvent>) => void' is not assignable to type '(event: 
   MouseEvent | TouchEvent) => void'.
  Types of parameters 'event' and 'event' are incompatible.
    Type 'MouseEvent | TouchEvent' is not assignable to type 'MouseEvent<Document, MouseEvent>'.
      Type 'MouseEvent' is missing the following properties from type 'MouseEvent<Document, 
      MouseEvent>': nativeEvent, isDefaultPrevented, isPropagationStopped, persi
           st 

How can I fix it?

And this file has the design of the buttons and gave them their own style

And when I activated this file it gave me this error which is above.

const options = ['Member', 'Admin'];

export default function SplitButton() {
    const [open, setOpen] = React.useState(false);
    const anchorRef = React.useRef<HTMLDivElement>(null);
    const [selectedIndex, setSelectedIndex] = React.useState(1);

    const handleClick = () => {
        console.info(`You clicked ${options[selectedIndex]}`);
    };

    const handleMenuItemClick = (
        event: React.MouseEvent<HTMLLIElement, MouseEvent>,
        index: number,
    ) => {
        setSelectedIndex(index);
        setOpen(false);
    };

    const handleToggle = () => {
        setOpen((prevOpen) => !prevOpen);
    };

    const handleClose = (event: React.MouseEvent<Document, MouseEvent>) => {
        if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
            return;
        }

        setOpen(false);
    };

    // @ts-ignore
    return (
        <Grid container direction="column" alignItems="center">
            <Grid item xs={12}>
                <ButtonGroup variant="contained" color="primary" ref={anchorRef} aria-label="split 
                    button">
                    <Button onClick={handleClick}>{options[selectedIndex]}</Button>
                    <Button
                        color="primary"
                        size="small"
                        aria-controls={open ? 'split-button-menu' : undefined}
                        aria-expanded={open ? 'true' : undefined}
                        aria-label="select merge strategy"
                        aria-haspopup="menu"
                        onClick={handleToggle}
                    >
                        <ArrowDropDownIcon />
                    </Button>
                </ButtonGroup>
                <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition 
                   disablePortal>
                    {({ TransitionProps, placement }) => (
                        <Grow
                            {...TransitionProps}
                            style={{
                                transformOrigin: placement === 'bottom' ? 'center top' : 'center 
                       bottom',
                            }}
                        >
                            <Paper>
                                <ClickAwayListener onClickAway={handleClose}>
                                    <MenuList id="split-button-menu">
                                        {options.map((option, index) => (
                                            <MenuItem
                                                key={option}
                                                disabled={index === 2}
                                                selected={index === selectedIndex}
                                                onClick={(event) => handleMenuItemClick(event, 
                                           index)}
                                            >
                                                {option}
                                            </MenuItem>
                                        ))}
                                    </MenuList>
                                </ClickAwayListener>
                            </Paper>
                        </Grow>
                    )}
                </Popper>
            </Grid>
        </Grid>
    );
}

Solution

Try changing your handleClose method to:

const handleClose = (event: MouseEvent | TouchEvent) => {
    if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
        return;
    }

    setOpen(false);
};

Why? The error message says that your handleClose method is not compatible with what ClickAwayListener can accept as input for its onClickAway callback.

Currently, your handleClose has the signature

(React.MouseEvent<Document, MouseEvent>) => void

while what is expected by ClickAwayListener‘s onClickAway is

(MouseEvent | TouchEvent) => void 

Answered By – maxpaj

Answer Checked By – Gilberto Lyons (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published