Error message after adding extra fields

[dschreij]

Following the instructions of the documentation, I am trying to add a first name and last name field on the signup screen. This seems to work well (as the fields appear), but the console outputs the following message twice (for each field):

Uncaught TypeError: Cannot read property 'value' of null
    at Field.triggerUpdate (fix.js:9)
    at Field.componentDidUpdate (Field.jsx:32)
    at measureLifeCyclePerf (modules.js?hash=d99a835…:17091)
    at modules.js?hash=d99a835…:17745
    at CallbackQueue.notifyAll (modules.js?hash=d99a835…:10070)
    at ReactReconcileTransaction.close (modules.js?hash=d99a835…:20344)
    at ReactReconcileTransaction.closeAll (modules.js?hash=d99a835…:11229)
    at ReactReconcileTransaction.perform (modules.js?hash=d99a835…:11176)
    at ReactUpdatesFlushTransaction.perform (modules.js?hash=d99a835…:11163)
    at ReactUpdatesFlushTransaction.perform (modules.js?hash=d99a835…:9823)

My child class is as follows:

import { Accounts, STATES } from 'meteor/std:accounts-ui';

export default class OswebLogin extends Accounts.ui.LoginForm {
  fields() {
    const { formState } = this.state;
    if (formState == STATES.SIGN_UP) {
      return {
        firstname: {
          id: 'firstname',
          hint: 'Please enter your first name',
          label: 'First name',
          onChange: this.handleChange.bind(this, 'firstname')
        },
        lastname: {
          id: 'lastname',
          hint: 'Please enter your last name',
          label: 'Last name',
          onChange: this.handleChange.bind(this, 'lastname')
        },
        ...super.fields()
      };
    }
    return super.fields();
  }

  signUp(options = {}) {
    const { firstname = null, lastname = null } = this.state;
    if (firstname !== null) {
      options.profile = Object.assign(options.profile || {}, {
        firstname: firstname
      });
    }
    if (lastname !== null) {
      options.profile = Object.assign(options.profile || {}, {
        lastname: lastname
      });
    }
    super.signUp(options);
  }
}

And my react-router (ommitting the imports)

Meteor.startup(() => {
  render(
    <Router history={ browserHistory }>
      <Route path="/" component={ AppContainer }>
        <IndexRoute component={() => <LoginPage><OswebLogin /></LoginPage>} />

        <Route path="/dashboard" component={ DashboardLayout }>
          <IndexRoute component={ ExperimentsListPageContainer } />
          <Route path="/dashboard/experiments/add" component={ ExperimentAddContainer } />
          <Route path="/dashboard/experiments/:id/edit" component={ ExperimentEditContainer } />
          <Route path="/dashboard/profile" component={ ProfilePage } />
        </Route>

        <Route component={ LoginPage }>
          <Route path="/login" component={() => <OswebLogin />} />
          <Route path="/signup" component={() => <OswebLogin formState={STATES.SIGN_UP} />} />
          <Route path="/reset-password" component={() => <OswebLogin formState={STATES.PASSWORD_RESET} />} />
          <Redirect from="/profile" to="/dashboard/profile" />
        </Route>
        <Route path="*" component={ NotFoundPage } />
      </Route>
    </Router>,
    document.getElementById('react-root'));
});

/* Redirects after login and logout */
Accounts.ui.config({
  onPostSignUpHook: () => browserHistory.replace('/dashboard'),
  onSignedInHook: () => browserHistory.replace('/dashboard'),
  onSignedOutHook: () => browserHistory.replace('/login'),
});

These are the package versions I am working with:

accounts-password            1.3.3  Password support for accounts
aldeed:simple-schema         1.5.3  A simple schema validation object with reactivity. Used by collection2 and autoform.
blaze-html-templates         1.1.0  Compile HTML templates into reactive UI with Meteor Blaze
ecmascript                   0.6.1  Compiler plugin that supports ES2015+ in all .js files
es5-shim                     4.6.15  Shims and polyfills to improve ECMAScript 5 support
fourseven:scss               3.13.0  Style with attitude. Sass and SCSS support for Meteor.js.
jquery                       1.11.10  Manipulate the DOM using CSS selectors
mdg:validated-method         1.1.0  A simple wrapper for Meteor.methods
meteor-base                  1.0.4  Packages that every Meteor app needs
mobile-experience            1.0.4  Packages for a great mobile user experience
mongo                        1.1.14  Adaptor for using MongoDB and Minimongo over DDP
react-meteor-data            0.2.9  React mixin for reactively tracking Meteor data
reactive-var                 1.0.11  Reactive variable
shell-server                 0.2.1  Server-side component of the `meteor shell` command.
standard-minifier-css        1.3.2  Standard css minifier used with Meteor apps by default.
standard-minifier-js         1.2.1  Standard javascript minifiers used with Meteor apps by default.
std:accounts-ui              1.2.17  Accounts UI for React in Meteor 1.3+
tracker                      1.1.1  Dependency tracker to allow reactive callbacks
zetoff:accounts-material-ui  0.0.10  Material-UI - Accounts UI for React in Meteor

I've seen talk of newer versions of std:accounts-ui being around, but this is the latest I get from atmosphere when using meteor add.

Great module by the way! Really makes adding user accounts to meteor projects a lot easier.

[dschreij]

I have to add that the extra fields are processed correctly, so nothing seems broken and these error messages seem harmless.

EDIT: upon closer inspection: there does seem to be unintended behavior: at first the last-name field is not rendered. Only after a extra refresh it appears.

[dschreij]

Hmm this problem appears to originate from a 'fix.js' module in Zetoff/accounts-material-ui, so I'm closing this issue here and hope to continue discussion there (Zetoff/accounts-material-ui#4 (comment)).