CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
user14510391
user14510391

Reputation:

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>
    );
}

Upvotes: 8

Views: 11889

Answers (4)

duong
duong

Reputation: 1

import mouseEvent of reactjs not use mouseEvent of MDN

Upvotes: -1

maxpaj
maxpaj

Reputation: 6831

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

Upvotes: 4

Atif
Atif

Reputation: 1547

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.

Upvotes: 0

Naveen Kashyap
Naveen Kashyap

Reputation: 372

try this

event:(MouseEvent | TouchEvent) => void

Upvotes: 0

Related Questions