React-starter-kit: Material-ui RadioButtonGroup doesn't seem to be working with React Starter Kit?

[vu0tran]

I posted this issue on StackOverflow as well.

I'm implementing material-ui's RadioButtonGroup component but it seems like there's something in React Starter Kit that's making it incompatible. Any idea what it could be?

When I create a fresh webpack of it here, it works fine, but when I go through RSK's routing, what I get is something that looks like this. The buttons are unresponsive.

I've wrapped material-ui in my client and made sure to inject the tap event plugin.

// client.js

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

...
...
    appInstance = ReactDOM.render(
      <App context={context}><MuiThemeProvider>{route.component}</MuiThemeProvider></App>,
      container,
      () => onRenderComplete(route, location),
    );

import React from 'react';
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';

class Contact extends React.Component {

  render() {
    return (
      <div>
        <RadioButtonGroup name="shipSpeed" defaultSelected="not_light">
          <RadioButton
            value="light"
            label="Simple"
          />
          <RadioButton
            value="not_light"
            label="Selected by default"
          />
          <RadioButton
            value="ludicrous"
            label="Custom icon"
          />
        </RadioButtonGroup>
      </div>
    );
  }
}

export default (Contact);

[langpavel]

Did you checked browser's console? Any hint there?

[vu0tran]

@langpavel Thanks for the reply. The only thing in the console is: "[HMR] connected".

If it would help, I can create a fresh React Starter Kit project with Material-UI and push it to Git.

[langpavel]

sorry, I don't know

[vu0tran]

Some more information that might help is that this is only happening on latest Chrome browser: Version 60.0.3112.50.

Works as expected on Safari / Firefox.

[langpavel]

Then it's really weird. Did you open issue on Material-ui? I'm almost sure that it's not connected to RSK

[kamaz]

@vu0tran I was hit with the same problem, it looks like the problem is with BrowserSync and its option Sync Options on Clicks. After disabling it material-ui works.

Although I'm not sure if the problem is with BrowserSync or material-ui.

[langpavel]

So It's development trouble? It works when you build?

[kamaz]

yes all works when it's built, and it only effects development process

[CostaRico]

+1

browserSync({
    port: 3000,
    ui: {
        port: 3001
    },
    ghostMode: false, // <-  

Thx to @kamaz

[kevinpaulretiban]

@CostaRico Thank you! That solved the issue I'm having.