React select not showing all items from collection

Hello,
I have a form that has a Select field in it the elements are coming from my db here’s the code for that:

``

const propTypes = {
  cityValue: React.PropTypes.object,
  cities: React.PropTypes.array.isRequired,
  locations: React.PropTypes.array.isRequired,
}

class ArtistCreateComponent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      cityValue: '',
      changes: {}
    };
    this.showSuccessMessage = this.showSuccessMessage.bind(this);
    this.cityOptions = this.cityOptions.bind(this);
    this.locationOptions = this.locationOptions.bind(this);
  }

  cityOptions() {
    console.dir(this.props.cities);
    return this.props.cities.map((city) => {
      return {'label':city.displayName, 'value':city._id};
    });
  }

  locationOptions() {
    const cityId = this.state.changes.cityId || '';
    const locationsFiltered = cityId ? _.where(this.props.locations, {cityId:cityId}) : this.props.locations;
    return locationsFiltered.map((location)=> {
      return {'label':location.name,'value':location._id};
    });
  }


  showSuccessMessage() {
    this.setState({successMessage: 'Artist created.'})
    document.getElementById('formtop').scrollIntoView({behavior:'smooth'})
    setTimeout(() => {
      this.setState({successMessage: null})
      FlowRouter.go('admin-page');
    }, 3000);
  }

  render() {
    const style = {
      height: 100,
      width: 400,
      margin: 20,
      textAlign: 'center',
      display: 'inline-block',
      backgroundColor: '#e85323',
    };

    return (<DashboardComponent>
      <div id='formtop'>
        <h1>Create Artist</h1>
        {!this.state.successMessage ? '' :
          <MuiThemeProvider>
            <Paper style={style} zDepth={3}>{this.state.successMessage}</Paper>
          </MuiThemeProvider>
        }
        <MuiThemeProvider>
          <Form
            collection={ArtistsCollection}
            type='insert'
            ref='form'
            onSuccess={this.showSuccessMessage}
            state={this.state.changes}
            onChange={changes => {this.setState({changes:changes});}}
          >
          <Field fieldName='artistName'/>
          <Field id='citySelectID' fieldName='cityId' options={this.cityOptions()}/>
          <Field id='optionSelectID' fieldName='locationIds' options={this.locationOptions()}/>
          <Field fieldName='image'/>
          <Field fieldName='photoCredit'/>
          <Field fieldName='description'/>
          <Field fieldName='color'/>
          <Field fieldName='soundcloud'/>
          <Field fieldName='isFeatured'/>
          </Form>
        </MuiThemeProvider>
        <MuiThemeProvider>
          <RaisedButton label='Back' onTouchTap={() => FlowRouter.go('admin-artist')}/>
        </MuiThemeProvider>
        <MuiThemeProvider>
          <RaisedButton primary={true} label='Create' onTouchTap={() => this.refs.form.submit()}/>
        </MuiThemeProvider>
      </div>
    </DashboardComponent>);
  }
}

ArtistCreateComponent.propTypes = propTypes;

export default createContainer(() => {
  const handler = Meteor.subscribe('cities-and-locations')
  const isLoading = !handler.ready()
  const cities = CitiesCollection.find({},{fields: {displayName:1}}).fetch()
  const locations = LocationsCollection.find({}, {fields: {name:1, cityId:1}}).fetch()
  return {isLoading, cities, locations}
}, ArtistCreateComponent)

You’ll see the method cityOptions has a console output that outputs several times during loading the thing is the number of items it retrieves changes, the first two times it gets 10 items, it then will get the total number of elements (which is 24). However the Select element never updates from the original query and only will show the 10 elements. I’m not even sure why it is grabbing ten elements in the first place instead of something like 0. Anyone know what I’m doing wrong here?

Thanks.

Maybe try use the isLoading prop, and only return the data when loading is done.

I could not get isLoading to work anywhere properly. I tried using it in the return in the data container, I also tried using it in the class itself. I would just end up with an empty array.
At first I was using my local data to work this out. I pulled my prod data down to make sure I was getting the same results and I’m not. It works locally(uggggg) but not in production I get the same ten items. If anybody has any next steps that would be great.

ok, it’s not a data issue, at least I don’t think so. Inspecting the react element via the React Development Tools extension the props show the correct items. But the don’t show in the browser! I’m thinking maybe I have a version difference with simple-react-form?

See what happens if you try

<Field id='citySelectID' fieldName='cityId' options={this.props.isLoading ? [] : this.cityOptions()}/>

Or !this.props.isLoading whichever is appropriate.

Thanks, I may need this later but it’s definitely a issue with simple-react-form-material-ui. I had a earlier version running locally, when downgrading the version on my production server, it started working. For now I’m moving this to simple-react-form-material-ui issue list on github.