onItemSelect only fires once per page refresh

[jmerriweather]

When you select an item, then select another item, then select the original item. The original item will ignore the click event

[mariusandra]

Very strange. This does not seem to be the case with the demo. Can you demonstrate the bug?

[momegas]

Same problem here. Works only once per page refresh.

Has this been resolved in some way?

[Sitethief]

Has anyone managed to fix this yet? I have the same problem and I can't find a solution.

[jlubben]

I figured a solution, but don't know why. If you install:
npm install --save-dev babel-plugin-transform-class-properties
and update the webpack to something like:

{
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015'],
          plugins: ['transform-class-properties']
        }
}

it runs correctly.

Edit: this is due to the arrow notation that is being used.

[mariusandra]

@jlubben thank you for finding this! :)

We do use class properties in the code for this module, mainly the bound functions like this:

class Timeline extends Component {
    boundFunction = () => {
      return this.instanceProperty;
    }
}

When the library is built, all of the code is converted (transpiled) to regular ES5 via babel and can be imported anywhere without complications.

However if you use a build tool that supports module (previously jsnext:main) in package.json, your build tool will instead take the untranspiled code. Rollup and Webpack 2+ both do this.

If then your babel configuration is not set up like the library's, you may run into problems.

I personally use these presets:

{
   "presets": ["es2015", "stage-0", "react"],
}

Adding stage-0 (babel-preset-stage-0) automatically adds transform-class-properties and some other useful features. If that seems a bit too experimental for you, then just stage-2 is enough.

I added a note for this into the README

Closing the issue now. Feel free to reopen in case of problems!