onChange, onEditorReady events not firing on Firefox with version 0.2.0

[ragesoss]

After upgrading to 0.2.0, I get the following error from the component that uses Trix:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `TextAreaInput`.

I can't tell what has changed in react-trix or trix itself that might trigger this error; the usage seems to correspond to the examples pretty closely:

https://github.com/WikiEducationFoundation/WikiEduDashboard/blob/30611248d982c1d9281c901b7b2b353314b930bd/app/assets/javascripts/components/common/text_area_input.jsx#L50

[dstpierre]

The onChange changed to return html and text instead of the element itself, it might be the breaking changes.

Can you try to change your _handleChange to _handleChange(html text)?

[ragesoss]

Thanks much! The immediate problem was the change in how it should be imported: not import TrixEditor from 'react-trix'; but import { TrixEditor } from 'react-trix';. After fixing that, I'm still trying to figure out how to make the new onChange behavior work.

[dstpierre]

Ok, thanks for the clarification. The onChange returns two parameters html and text like this:

export class Component extends Component {
  constructor(props) {
    super(props);
    this.state = {
      html: ""
    };
  }
  handleChange(html, text) {
    // in case you only want the html for example
    this.setState({ html: html });
  }
  render() {
    return (
      <TrixEditor onChange={this.handleChange.bind(this)] />
    )
  }
}

Now if you need a reference to the Trix editor you will need to use the onEditorReady event like so:

export class Component extends React.Component {
  constructor(props) { super(props); this.state = { editor: null }; }
  handleChange(html, text) { }
  handleEditorReady(e) { this.setState({ editor: e }); }
  render() {
    return (
      <TrixEditor onChange={this.handleChange] onEditorReady={this.handleEditorReady.bind(this)} />
    )
  }
}

Are you requiring to have more info on the onChange event?

[ragesoss]

The onChange event does not appear to be firing. I did this: https://github.com/WikiEducationFoundation/WikiEduDashboard/commit/a12240d88c2309acd9c68192ba6c17b939c953fa

When I make changes in the editor, the console logging does not happen. (It works as expected in the previous version.) Similarly, for me the handeReady event would not fire.

Not sure where I'm going wrong. The editor appears to work normally, taking the initial value provided via the value prop, but while typing into the editor works, the onChange function isn't being called.

[dstpierre]

I've cloned your project to try to find where you were referencing Trix itself, from your bower.json file it seems you still have 0.9 in there, the latest version is 0.10.1, I would guess this is the source of the issues.

Might be worth to test this for example on your page: <script src="https://rawgit.com/basecamp/trix/master/dist/trix.js"></script>

Let me know if that was the issue.

[ragesoss]

Thanks, I'll give that a try. I did upgrade Trix in bower in that commit above, and I think that react-trix would pull it from node_modules rather than vendor anyway, but I'll poke at it more today.

[ragesoss]

Nope, it doesn't look like that was the issue. I tried Trix from the bower config altogether — which did cause Trix not to render, so it was coming from bower after all — and then added the script tag to get 10.1 directly. The behavior is the same: the editor renders and I can make changes within the editor, but the change handler is not firing.

[dstpierre]

This is a working app based on an es6 react boilerplate, maybe you can see what's different from your current project:

git clone https://github.com/dstpierre/react-trix-demo.git
cd react-trix-demo
npm install
npm start

Open browser at http://localhost:5000 and you should see the console.log for the onChange event showing the html changes.

[ragesoss]

Progress! I've been using Firefox (Firefox 45 ESR on Debian) and both my app and your sample app don't run the onChange or onEditorReady events. I tried it on Chrome and they work there (for both my app and the sample app).

Anything come to mind in terms of what might have broken Firefox support in the new version?

[ragesoss]

I also confirmed that Trix 0.10.1 works fine (with react-trix 0.1.0).

[dstpierre]

That's good, thank you very much for your patience. I will investigate Firefox (should have had done that frankly), lesson learned. I'll keep you posted when I have the update ready.

[dstpierre]

This is now fixed in 4028d89ee845e48c28e7eeab74d118c83f23ab05 a new NPM package was published 0.2.1.

Thank you for reporting this, highly appreciated.