IE8 issue, 'this.refs.input' is null or not and object

[Joran182to]

Hi, I am trying to use tcomb-forms for React-based project and I have an issue with IE8. So, I am trying to load 'Working example' from docs, and in IE8 I got an error, " 'this.refs.input' is null or not and object ", it's related to this part of code from tcomb-forms/src/components.js, line 819:

getComponent(path) {
    const points = t.String.is(path) ? path.split('.') : path
    return points.reduce((input, name) => input.refs[name], this.refs.input)
  }

In other browsers, of course, it works as expected. Waiting for your advices.

[gcanti]

Hi, I have not a IE8 at hand so I can just try to guess. Have you tried to debug the compiled code in node_modules/tcomb-form/lib/component.js?

[Joran182to]

Yes, I tried. So, seems like something wrong with 'this':

[gcanti]

Hi @Joran182to, Once we understand the problem, I can try to fix it, but I need your help: I have no access to a working copy of IE8 at the moment, the only thing I can do is to rely on you. From the picture you posted seems that this is the global, any clue on that?

[stepan-romankov]

Hi @gcanti. I found the cause of problem. It's because of call of getComponent in "render" function of Form class. What I see in compiled (ES5) version of code is:

  Form.prototype.getComponent = function getComponent(path) {
    var points = _tcombValidation2['default'].String.is(path) ? path.split('.') : path;
    return points.reduce(function (input, name) {
      return input.refs[name];
    }, this.refs.input);
  };
....
Form.prototype.render = function render() {
...
return _react2['default'].createElement(getComponent(type, options), {
}

And at the early beginning you define global function getComponent. So IE8 selects function from Form class instead of function from global scope. So to solve this problem function getComponent of Form class should be renamed or global getComponent function should some how be explicitly called. What do you think is better?

Thanks in advance

[gcanti]

Wow, what a nasty bug.

I can't rename Form.prototype.getComponent (it's a public API). I can rename the getComponent function at the beginning though, say to getFormComponent.

@stepan-romankov could you please make a quick test replacing in the compiled code all the occurences of the global getComponent to getFormComponent except Form.prototype.getComponent and verify that such change would fix this issue?

[stepan-romankov]

I checked renaming of global function getComponent to getFormComponent helps. When approximately you will be able to patch and release update?

[gcanti]

A few minutes I guess

[gcanti]

Patch released in https://github.com/gcanti/tcomb-form/releases/tag/0.7.10 Let me know if everything's ok, thanks for your help.