In Safari render() being run before the constructor() resulting in this.refs failing with undefined value as useRef never called

[AhnafCodes]

https://codepen.io/ahnafcodes/pen/PooyGdK

Steps:

1. please open the above codepen in Safari browser and in chrome. It works in chrome and fails to render in safari.
2. Please open debugger in chrome and safari
3. Reload each browser to see the difference.

Behavior: I have set debugger in "constructor" and "render" as you can see in codepen, oddly in the safari browser the render() runs before constructor().

It might be a custom component api issue in Safari, Unfortunately Safari is the default browser for Ipad users.

[AhnafCodes]

Does this issue stem from this https://github.com/wikipathways/pvjs/issues/408

[AhnafCodes]

I don't want to do this in render() when using any hooks:

if(isSafari && !this.refs) { 
         this.constructor(); 
      } 
// looks hacky and is ugly```

[WebReflection]

Will have a look once I get a chance to be in front of a PC (hopefully soon)

[WebReflection]

I think the issue is that you are using constructor which is forbidden in Safari ... use oninit event/method to define once anything you need, including refs.

TL;DR move anything you do in constructor within oninit() instead 😉