Skip to content

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

Open
@kwinyyyc

Description

@kwinyyyc

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])

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions