We have a library which was developed by a third-party for use along with app which use this library. The library is providing type for different components and layouts:
type FooterIconButtonType = typeof FooterIconButtonInt;
export const FooterIconButton: FooterIconButtonType = (props: ComponentProps<FooterIconButtonType>) => {
return (
<FooterIconButtonInt {...props} onClick={undefined} onMouseDown={props.onClick} onTouchStart={props.onClick} />
);
};
The main app then uses this to trigger button actions:
<FooterButtonsWrapper center style={{zIndex: 2, position: 'relative'}}>
<FooterIconButton hide={isGrid} src={AppIcons.backSmall} onClick={handlePrevious} />
This triggers a function:
const handlePrevious = useCallback(() => {
//do some stuff here!!
}, []);
However what I’m getting is both the onMouse and onTouch trigger at the same time so in effect double pressing causing the function to fire twice.
I have tried adding preventDefault() and stopProagation() into the function code and I’ve also made two separate functions as intermediary to the handlePrevious function. In effect causing onMouse and onTouch to call different functions then move to handlePrevious but placing the above commands to stop propgation but this makes no difference. If I remove one or the other on event then it reverts to a single press action.
I’m a little rusty on React and I might be missing something obvious here :/
Ed Williams is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.