CODEWITHSUNDEEP
reactjsreact-routermaterial-uireact-starter-kitformsy-material-ui
Vu Tran
Vu Tran

Reputation: 610

RadioGroupButton doesn't seem to work with React Starter Kit

Here's a gif of it: http://www.giphy.com/gifs/3oKIP7arhKhNzNzytq

As you can see, whenever I click on it, it doesn't select.

Here's my exact code which is working in webpack: https://www.webpackbin.com/bins/-KoaaPYxDno695fiUBMn

But in my starter kit environment, it doesn't seem to work. However, checkboxes seem to work. Any ideas?

"react": "^15.5.4",
"react-dom": "^15.5.4",
"material-ui": "^0.18.6",

EDIT: I also have react-tap-event-plugin and I've called it at the top of my client.js file. Also tried on the top of my Location.js file. 

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

Here's my full dependency list:

dependencies": {
    "apisauce": "^0.14.0",
    "babel-polyfill": "^6.23.0",
    "bluebird": "^3.5.0",
    "body-parser": "^1.17.2",
    "classnames": "^2.2.5",
    "cookie-parser": "^1.4.3",
    "core-js": "^2.4.1",
    "express": "^4.15.3",
    "express-graphql": "^0.6.6",
    "express-jwt": "^5.3.0",
    "graphql": "^0.10.3",
    "history": "^4.6.3",
    "isomorphic-style-loader": "^2.0.0",
    "jsonwebtoken": "^7.4.1",
    "material-ui": "^0.18.6",
    "node-fetch": "^1.7.1",
    "normalize.css": "^7.0.0",
    "passport": "^0.3.2",
    "passport-facebook": "^2.1.1",
    "pretty-error": "^2.1.1",
    "prop-types": "^15.5.10",
    "query-string": "^4.3.4",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-tap-event-plugin": "^2.0.1",
    "sequelize": "^4.2.1",
    "serialize-javascript": "^1.3.0",
    "source-map-support": "^0.4.15",
    "sqlite3": "^3.1.8",
    "universal-router": "^3.2.0",
    "whatwg-fetch": "^2.0.3"
  },

Upvotes: 2

Views: 126

Answers (2)

HiteshGpt
HiteshGpt

Reputation: 1

I strugged with this problem for couple of days and found a solution. See if it works for you

Why was it not working?

If you look closely at the backend code of RadioButton you'll realize that it is actually similar to the Checkbox. I realized the problem was not only with RadioButtons but the checkbox was also not working (while the toggles were working fine).

I took my source code and ran it using CRA (Create React App) and it the RadioButtons were working perfectly. For RSK (React Starter Kit) the first suspect which was different was BrowserSync. I dug a little deeper and found that there is a config in BrowserSync for Ghost clicks which was to be turned off. You can read more about it here

https://github.com/callemall/material-ui/issues/2983

To turn off Ghost mode in your start script, goto /tools/start.js in your RSK Project folder and change config to

browserSync.create().init(
  {
    // https://www.browsersync.io/docs/options
    server: 'src/server.js',
    ghostMode: false,
    middleware: [server],
    open: !process.argv.includes('--silent'),
    ...(isDebug ? {} : { notify: false, ui: false }),
  },
  (error, bs) => (error ? reject(error) : resolve(bs)),
),

Upvotes: 0

Mike Szyndel
Mike Szyndel

Reputation: 10593

You are most probably missing the react-tap-event-plugin. Add it with npm install -save react-tap-event-plugin

Upvotes: 1

Related Questions