inline-grid prevent component from updating

[Nico-L]

Hi,

I just stumbled twice on the same problem I don't understand. I am working on an app with meteor 1.4.1, react, material-ui and inline-grid. Inline-grid seems to prevent inside component to update.

The following is the code for a list of image user can pick up to illustrate an event. Below each image I align 3 icons with inline-grid. The select/selected icon (the fist one) shows weither the user pick this particular image. The icon is not updated inside the inline-grid row. As soon as I put it outside, everything works fine though. I spent quite some time figuring out where the problem is.

The code

<div>
 <GridTile key={image._id}>
      <img 
          src={Images.link(image, 'taille120')} 
          width="120"
          onClick={() => {self.choisirImage(image._id)}}
           />
      <Row is="around nospace">
          <Cell is="3">
            <FontIcon className={self.choixIcon(image._id)}/>
            </Cell>
          <Cell is="3">
            <FontIcon className="fa fa-crop"/>
            </Cell>
          <Cell is="3">
            <FontIcon className="fa fa-remove"/>
            </Cell>
        </Row>
</GridTile></div>

I don't understand this behavior. How could I do for updating the FontIcon inside the GridTile ? Do I miss something?

[1024kilobyte]

Same here, but with the difference, that it all works locally. After deploying the application (via mup) reactive updates are not working if a data bound control is inside a Grid. I'm using meteor 1.4.1.1, react 15.3.1, react-router 2.8.0 and material ui 0.15.4. I created a simple test page demonstrating the issue:

Working

import React, {Component} from 'react'
import TextField from 'material-ui/TextField'

export default class TestPage extends Component {
  constructor (props) {
    super(props)

    this.state = {message: 'initial'}
  }

  onTextChange (event, value) {
    event.preventDefault()

    this.setState({message: value})
  }

  render () {
    return (
            <TextField id='myTextField' value={this.state.message} onChange={this.onTextChange.bind(this)} />
    )
  }
}

Not working

import React, {Component} from 'react'
import TextField from 'material-ui/TextField'
// Layouting
import { Grid, Row, Cell } from 'react-inline-grid'

export default class TestPage extends Component {
  constructor (props) {
    super(props)

    this.state = {message: 'initial'}
  }

  onTextChange (event, value) {
    event.preventDefault()

    this.setState({message: value})
  }

  render () {
    return (
      <Grid is='nospace'>
        <Row is='nospace'>
          <Cell is='nospace'>
            <TextField id='myTextField' value={this.state.message} onChange={this.onTextChange.bind(this)} />
          </Cell>
        </Row>
      </Grid>
    )
  }
}

Anybody an idea what the difference could be between local and remote execution? Or any other idea to fix this? I used this grid component pretty much and it would be some work to switch to another layouting component.

[1024kilobyte]

Just testet deployment with NODE_ENV = 'development' and it works.

@Nico-L: Can you confirm that the problem only exists if you are using NODE_ENV = 'production'

[Nico-L]

Hi,

No, I am still in local development and it doesn't work either.

Nicolas

2016-09-11 13:49 GMT+02:00 1024kilobyte [email protected]:

Just testet deployment with NODE_ENV = 'development' and it works.

@Nico-L https://github.com/Nico-L: Can you confirm that the problem only exists if you are using NODE_ENV = 'production'

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/broucz/react-inline-grid/issues/11#issuecomment-246176233, or mute the thread https://github.com/notifications/unsubscribe-auth/ALaDKfrRgwWBvrBH-_AOsCgsDAa115Ttks5qo-rEgaJpZM4J40fa .