search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.86k stars 32.26k forks source link

[1.0.0 beta] No Ripples on Clicks #9534

Closed kevinguard closed 6 years ago

kevinguard commented 6 years ago

[ X ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

1.0.0.beta components with inner ripples on clicks should display correct ripples.

Current Behavior

Currently I have both material-ui@0.19.4 and material-ui@1.0.0.beta within the same project where I use webpack 3.10.0 to build and bundle my application. So far I haven't had any problem with 0.19.4 components, though, those imported from 1.0.0.beta with supposedly inner ripples like buttons are missing the ripples. In other words, clicks do not produce any ripple in the components, though, they correctly react to mouse hovers.

Steps to Reproduce (for bugs)

The following is a simple component where buttons are rendered correctly but no ripples are shown on clicks:

import React, { PureComponent } from "react";
import PropTypes from "prop-types";

import Button from "material-ui-next/Button";
import { withStyles } from "material-ui-next/styles";
import { MuiThemeProvider, createMuiTheme } from "material-ui-next/styles";

const theme = createMuiTheme();

const styles = theme => ({
    button: {
        margin: theme.spacing.unit,
    },
});

class MaterialRaisedButtonNext extends PureComponent {

    static propTypes = {
        classes: PropTypes.object.isRequired,
    };

    render() {
        const { classes, children, ...more } = this.props;

        return (
            <MuiThemeProvider theme={theme}>
                <Button {...more}
                        raised
                        color="primary"
                        className={classes.button}>
                    {children}
                </Button>
                <Button {...more}
                        raised
                        color="accent"
                        className={classes.button}>
                    {children}
                </Button>
                <Button {...more}
                        raised
                        color="contrast"
                        className={classes.button}>
                    {children}
                </Button>
            </MuiThemeProvider>
        );
    }
}

export default withStyles(styles)(MaterialRaisedButtonNext);

Context

This issue is affecting all components which inner ripples, e.g., buttons.

Your Environment

My project package.json:

    "aphrodite": "^1.2.4",
    "axios": "^0.16.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-flow-strip-types": "^6.18.0",
    "babel-plugin-transform-react-constant-elements": "^6.23.0",
    "babel-plugin-transform-react-inline-elements": "^6.22.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.3.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "bcrypt-nodejs": "0.0.3",
    "bluebird": "^3.5.1",
    "body-parser": "^1.18.2",
    "class-autobind": "^0.1.4",
    "classnames": "^2.2.3",
    "connect-mongo": "^1.3.2",
    "cookie-parser": "^1.4.3",
    "create-react-class": "^15.6.2",
    "cross-env": "^4.0.0",
    "css-loader": "^0.28.7",
    "d3": "^4.11.0",
    "draft-js": "^0.10.3",
    "draft-js-emoji-plugin": "^2.0.0-rc9",
    "draft-js-export-html": "^1.2.0",
    "draft-js-export-markdown": "^1.2.0",
    "draft-js-import-html": "^1.2.1",
    "draft-js-import-markdown": "^1.2.1",
    "draft-js-plugins-editor": "^2.0.0-rc8",
    "draft-js-utils": "^1.2.0",
    "element-resize-detector": "^1.1.12",
    "es6-promise": "^4.1.0",
    "express": "^4.16.1",
    "express-session": "^1.15.6",
    "express-socket.io-session": "^1.3.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^0.11.1",
    "fs": "0.0.2",
    "global": "^4.3.2",
    "i18next": "^10.2.1",
    "immutable": "^3.8.2",
    "inline-environment-variables-webpack-plugin": "^1.2.1",
    "interact.js": "^1.2.6",
    "isomorphic-fetch": "^2.2.1",
    "js-file-download": "^0.4.1",
    "js-tree": "^1.1.0",
    "json-loader": "^0.5.4",
    "katex": "^0.6.0",
    "linkifyjs": "^2.1.5",
    "lodash": "^4.17.2",
    "material-ui": "^0.19.4",
    "material-ui-icons": "^1.0.0-beta.17",
    "material-ui-next": "^1.0.0-beta.23",
    "mathjs": "^3.16.4",
    "method-override": "^2.3.10",
    "mkdirp": "^0.5.1",
    "moment": "^2.17.0",
    "mongoose": "^4.12.1",
    "multer": "^1.1.0",
    "object-assign": "^4.1.0",
    "papaparse": "^4.3.6",
    "parse-katex": "^0.3.0",
    "passport": "^0.3.2",
    "passport-local": "^1.0.0",
    "passport.socketio": "^3.7.0",
    "postcss-cssnext": "^2.10.0",
    "postcss-import": "^9.0.0",
    "postcss-loader": "^1.3.3",
    "postcss-reporter": "^3.0.0",
    "postcss-simple-vars": "^3.0.0",
    "prop-types": "^15.6.0",
    "radium": "^0.19.6",
    "ramda": "^0.25.0",
    "react": "^16.2.0",
    "react-addons-update": "^15.6.2",
    "react-audio-player": "^0.6.2",
    "react-bootstrap": "^0.31.5",
    "react-bootstrap-table": "^4.0.0",
    "react-burger-menu": "^2.1.8",
    "react-color": "^2.13.8",
    "react-data-grid": "^2.0.60",
    "react-datetime": "^2.10.3",
    "react-dom": "^16.2.0",
    "react-dropzone": "^3.13.4",
    "react-emoji": "^0.4.4",
    "react-helmet": "^5.2.0",
    "react-i18next": "^7.0.2",
    "react-icons": "^2.2.7",
    "react-loader": "^2.4.2",
    "react-mixin": "^2.0.2",
    "react-pure-render": "^1.0.2",
    "react-redux": "^5.0.6",
    "react-router": "^3.2.0",
    "react-router-bootstrap": "^0.23.1",
    "react-router-redux": "^4.0.7",
    "react-select": "^1.0.0-rc.10",
    "react-sortable-hoc": "0.6.8",
    "react-stickydiv": "^3.4.20",
    "react-transform-hmr": "^1.0.4",
    "redux": "^3.6.0",
    "redux-burger-menu": "^0.2.2",
    "redux-logger": "^2.7.4",
    "redux-thunk": "^2.0.1",
    "rimraf": "^2.6.2",
    "serve-favicon": "^2.4.5",
    "socket.io": "^1.6.0",
    "socket.io-client": "^1.6.0",
    "style-loader": "^0.17.0",
    "unique-filename": "^1.1.0",
    "url-loader": "^0.5.8",
    "uuid": "^3.1.0",
    "webpack": "^3.8.1",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-manifest-plugin": "^1.3.2",
    "winston": "^2.4.0",
    "xml2js": "^0.4.19"
Tech Version
Material-UI 1.0.0 beta
React 16.2.0
browser Chrome Latest
oliviertassinari commented 6 years ago

It's most likely an issue with react-transition-group. We need the latest version installed.

oliviertassinari commented 6 years ago

Make sure your dependencies are up to date. It should be working. Feel free to provide a reproduction repository if it doesn't so we can dig into it.