Uncaught TypeError: anchor.addEventListener is not a function.

[ZeraiGR]

Gravity Tooltip is crashing, when it's children is a legacy class react component.

This is because we have only one check inside useTooltipVisible hook to ensure that anchor exist.

But anchor may exist but not to be instance of HTMLElement and in this case application will be crashed.

My offer to handle this case is the following:

1. If the legacy class react component have a ref, we can try to resolve it inside setRef helper. It may be written something like this:

export function setRef(ref, value) {

    if (!(value instanceof HTMLElement)) {
        // try to extract ref from legacy class react components

        if (value?.ref?.current instanceof HTMLElement) {
            value = value.ref.current;
        }
    }

    if (typeof ref === 'function') {
        ref(value);
    }
    else if (ref) {
        ref.current = value;
    }
}

Of course it should be refactored, may be moved to separate helper (in separate file) to resolve value for ref.

2. If the legacy class react component haven't a ref. We shouldn't crash the app, but print warning. It can be implemented inside useTooltipVisible hook, something like this:

if (!(value instanceof HTMLElement)) {
       console.warn("Tooltip won't be work! Because it's children can't be resolved to html element, try to wrap your component inside <div>...<div>") // the text of error just for example. It also needs to be corrected.
       return undefined;
    }

Repo for reproduce the error: https://github.com/ZeraiGR/gravity-tooltip-issue-minimal-example-to-reproduce