'Types of parameters 'event' and 'event' are incompatible

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 1:[1]

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 

Solution 2:[2]

try this

event:(MouseEvent | TouchEvent) => void

Solution 3:[3]

Had the same problem myself. Looks like MouseEvent needs its template argument of HTMLElement

function onMenuClick(e: MouseEvent<HTMLElement>): void {
        console.log('got the click');
    }

That took care of the warning. Let me know if you are still having trouble.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Naveen Kashyap
Solution 3 Atifm