Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature request] Callback when area outside portal is clicked #90

Open
kwinyyyc opened this issue Mar 21, 2023 · 0 comments
Open

[Feature request] Callback when area outside portal is clicked #90

kwinyyyc opened this issue Mar 21, 2023 · 0 comments

Comments

@kwinyyyc
Copy link

I want to check if the modal is saved before the user exit the modal also when they click outside the modal.

Is it possible to add a prop e.g. validateOnOutsideMouseClick: ()=>bool or onOutsideMouseClick: ()=> void

const handleOutsideMouseClick = useCallback((e: MouseEvent): void => {
    const containsTarget = (target: HTMLElRef) => target.current.contains(e.target as HTMLElement)
    if (containsTarget(portal) || (e as any).button !== 0 || !open.current || containsTarget(targetEl)) return
    const isValid = validateOnOutsideMouseClick && typeof validateOnOutsideMouseClick === 'function' ? validateOnOutsideMouseClick() : true;
    if (closeOnOutsideClick && isValid) closePortal(e)
  }, [isServer, closePortal, closeOnOutsideClick, portal])
const handleOutsideMouseClick = useCallback((e: MouseEvent): void => {
    const containsTarget = (target: HTMLElRef) => target.current.contains(e.target as HTMLElement)
    if (containsTarget(portal) || (e as any).button !== 0 || !open.current || containsTarget(targetEl)) return
    if (onOutsideMouseClick) onOutsideMouseClick();
    if (closeOnOutsideClick) closePortal(e)
  }, [isServer, closePortal, closeOnOutsideClick, portal])
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant