React-tooltip: Expecting a function in instanceof check, but got [object MouseEvent]

[SubVersive]

This issue reproduced sometimes on Android devices mostly GT-P5210 / SM-T210 / GT-N8000
(os is ~4.4.2).

Some error description:

TypeError
Expecting a function in instanceof check, but got [object MouseEvent]

Callstack:
line: var switchToSolid = e instanceof window.FocusEvent || isGlobalCall;
line: this.showTooltip(e);

"react": "^15.0.1"
"react-dom": "^15.0.1"
"react-tooltip": "3.1.5"

Thanks for helping.

[wwayne]

Okay, will take a look when I'm free

[dannypk]

So with older browsers i get also issues. Maybe can be something fixed ?

For Tablet Android 4.2.2 native browser, it doesn't show at all. I tested it in an older version of safari that it's very similar with the android browser and i get the following error

TypeError: 'undefined' is not a valid argument for 'instanceof' (evaluating 'e instanceof window.FocusEvent')

at var switchToSolid = e instanceof window.FocusEvent || isGlobalCall; also

[huumanoid]

Hi @dannypk thank you for your feedback, it makes me think that the problem is important.

FocusEvent is indeed undefined in my 4.2.2 Android's native browser.

May be it's more appropriate to rely on event's type field.

I don't know is native browser has event with type === 'focus'. I'm not able to raise focus event, when I'm focusing button - nothing happens.
I've also tested with iOS 10.2.1, focus event seems doesn't seem to be raise-able too, but FocusEvent is not undefined.

In general, it seems like checking type of event object is less error-prone way.
But I can't find any compatibility-tables which guarantees that type field is exists in older browsers, even if standard, proposed this field, is very old.
https://developer.mozilla.org/en-US/docs/Web/API/Event/type

I've used this page to test whatever browser has window.FocusEvent or the event has type field:
http://hmnid.ru:8090/event-type.html

[dannypk]

So the current problem i'm having is that the tooltips are not actually working on android 4.2.2. They work totally fine everywhere else like iPad Safari, Chrome, Firefox. Just native browser doesn't trigger anything. I could see the error just in that safari browser which simulates somehow the behaviour of android 4.2.2, since they are both very old.

[huumanoid]

Are you sure that fixing this problem is worth it?

I'll give a try and make a fix for this issue, but I'm uncertain is there any undesirable side effects.

[huumanoid]

Ok now it seems like react-tooltip works in my obsolete native browser.

http://localhost:8090/click-buttons.html

Please, try it.

You may check this patch in your app:

npm install github:huumanoid/react-tooltip#fix-focus-event-dist

[huumanoid]

Well, I suppose that new changes are OK.

Consider three versions of tooltip:

1. Original - detects focus event evaluating instanceof.
2. Patched - detects focus event by checking event.type field.
3. Broken - doesn't detect focus event at all.

For desktop browsers:
Tooltip with event="focus" works both with original tooltip and patched tooltip.
In broken version, tooltip doesn't work for focus event.
Therefore, logic is not altered.

For obsolete mobile browsers:
Tooltips for click event works both with patched and broken version.

[dannypk]

i'll give it a try on Monday. Thank you ! :)

[dannypk]

@huumanoid i tried it and it still doesn't work for me. Maybe i am doing something wrong?
As i see your changes, it's just the event type that has to be changed, or ? How do i set the version of the tooltip ?

So i tried with event = 'click' or 'focus' and neither works.
Thanks!

[huumanoid]

Have you tried http://hmnid.ru:8090/click-buttons.html ?
Is there any errors?

If my example (the link above) is works for you, please, make sure you have installed right version of react-tooltip.
Try to remove react-tooltip from node_modules and install my version again.

rm node_modules/react-tooltip
npm install github:huumanoid/react-tooltip#fix-focus-event-dist

If my example doesn't work, please, try to click the "click" button here http://hmnid.ru:8090/event-type.html
Does the output look like this?

typeof event = object
type = click
typeof FocusEvent = function
typeof MouseEvent = function

or

typeof event = object
type = click
typeof FocusEvent = undefined
typeof MouseEvent = function

[dannypk]

I did all of those. I get

typeof event = object
type = click
typeof FocusEvent = undefined
typeof MouseEvent = object

On focus doesn't work.

```
event='click'
globalEventOff="click">

[dannypk]

We closed the ticket as it doesn't worth the effort of fixing a bug only for native 4.2.2. It may also cause other several bugs which we don't want. Thanks anyway for your support !

[huumanoid]

Thank you for your feedback!

Perhaps, Android 4.4.2 (as OP stated) is also subject to this error, too. And the symptom is different.

Expecting a function in instanceof check, but got [object MouseEvent]

I'm really discouraged that I can't check your case, because I don't have Tablet Android 4.2.2 device, and emulator doesn't want to work on my laptop.
It seems that there is a difference between Smartphone Android and Tablet Android even for the same version of Anrdoid (4.2.2). This is discouraging too.

[dannypk]

you can try using Safari 5.x. The old version for Windows. It's like an emulator of Android. All the bugs you see there, are in tablet also :)

[huumanoid]

Thank you, @dannypk, your advice is works. Safari 5.x is awesome!
I found two issues:

1. There is no mouseenter and mouseleave events.
2. #232

This dist has both issues (and the issue with event.type) fixed:

npm install github:huumanoid/react-tooltip#fix-is-transformed-check-dist

I think, first issue is wont-fix, and the second one is something more significant.