I have a button which is disappearing when clicked on. Also clicking the button once does not result in any button actions running. I have to click the button and then click the area where the button was after it disappears for my button actions to take effect.

<Grid className={classes.container} style={{justifyContent: 'flex-end'}} item xs={12}>
            <Button className={classes.addImage} onClick={this.addPic}>
                <input 
                className={classes.takePic} 
                ref="file"
                id="takePic" 
                type="file" 
                accept="image/*"
                onChange={this.onChange}
                />
                Add 
                <br></br>
                Image

            </Button>
        </Grid>

Styling:

 addImage: {
    display: 'flex',
    backgroundColor: 'black',
    color: 'white',
    borderRadius: 90,
    height: 100,
    width: 100,
    justifySelf: 'flex-end',
    marginRight: '12.5%',
},

onChange function:

    onChange = () => {
    let newfile = this.refs.file.files[0];
    let reader = new FileReader();
    let url = reader.readAsDataURL(newfile);
    reader.onloadend = () => {
        this.setState({
            ...this.state,
            openModal: true,
            imgSrc : [reader.result],
            imageType: newfile.type,
            newfile: newfile,
            filename: `${this.props.user.id}_${Date.now()}`
        })
        console.log(newfile)
        console.log(this.state)

    }
}

addPic function:

addPic = () => {
        document.getElementById('takePic').click()
    }

I have a button which is disappearing when clicked on. Also clicking the button once does not result in any button actions running. I have to click the button and then click the area where the button was after it disappears for my button actions to take effect.

<Grid className={classes.container} style={{justifyContent: 'flex-end'}} item xs={12}>
            <Button className={classes.addImage} onClick={this.addPic}>
                <input 
                className={classes.takePic} 
                ref="file"
                id="takePic" 
                type="file" 
                accept="image/*"
                onChange={this.onChange}
                />
                Add 
                <br></br>
                Image

            </Button>
        </Grid>

Styling:

 addImage: {
    display: 'flex',
    backgroundColor: 'black',
    color: 'white',
    borderRadius: 90,
    height: 100,
    width: 100,
    justifySelf: 'flex-end',
    marginRight: '12.5%',
},

onChange function:

    onChange = () => {
    let newfile = this.refs.file.files[0];
    let reader = new FileReader();
    let url = reader.readAsDataURL(newfile);
    reader.onloadend = () => {
        this.setState({
            ...this.state,
            openModal: true,
            imgSrc : [reader.result],
            imageType: newfile.type,
            newfile: newfile,
            filename: `${this.props.user.id}_${Date.now()}`
        })
        console.log(newfile)
        console.log(this.state)

    }
}

addPic function:

addPic = () => {
        document.getElementById('takePic').click()
    }

• javascript
• css
• reactjs
• material-ui

Share Improve this question Follow edited Mar 25, 2019 at 17:15 asked Mar 25, 2019 at 17:11 user6534794user6534794 12

• 1 What does this.addPic and this.onChange do ? Can we see the functions ? Or a fiddle ? – Bambou Commented Mar 25, 2019 at 17:12
• I edited my post to include these functions. I didn't include them in the original post because this issue was occurring before I created these functions. – user6534794 Commented Mar 25, 2019 at 17:16
• An input tag within button tag?? – G_S Commented Mar 25, 2019 at 17:25
• @G_S now that you mention it, the input doesn't need to be on the button. I will try moving that and see if that fixes the issue. – user6534794 Commented Mar 25, 2019 at 17:27
• 1 @tdammon When trying your link, the button does not disappear. There is however a pretty extreme hover effect that makes the button very light. On mobile, sometimes the "hover" (e.g. tooltip) is triggered by the first touch and then the second touch would register as a click, but I don't think Material-UI buttons work that way by default and I'm not able to reproduce the behavior you describe -- my first click works fine. – Ryan Cogswell Commented Mar 25, 2019 at 19:14

 |  Show 7 more ments

1 Answer 1

Sorted by: Reset to default 6

You have to be careful when overriding the CSS for the colors for Material-UI's Button. It is fairly easy to have an undesirable effect (particular on the "hover" state) on touch devices if you override the colors without following the pattern used within Button.

Below are excepts from Button's styles that handle the colors for the "text" variant (the default):

export const styles = theme => ({
  /* Styles applied to the root element. */
  root: {
    color: theme.palette.text.primary,
    transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
      duration: theme.transitions.duration.short,
    }),
    '&:hover': {
      backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity),
      // Reset on touch devices, it doesn't add specificity
      '@media (hover: none)': {
        backgroundColor: 'transparent',
      },
      '&$disabled': {
        backgroundColor: 'transparent',
      },
    },
    '&$disabled': {
      color: theme.palette.action.disabled,
    },
  },
  /* Styles applied to the root element if `disabled={true}`. */
  disabled: {},
});

In your addImage class, you change the button's backgroundColor to black and color to white, but you don't handle what should happen on hover. Material-UI's styling will then win for hover due to specificity, and on touch devices ('@media (hover: none)') the background will bee transparent, but your change of color to "white" (instead of theme.palette.text.primary) will still be in effect which, if your page background is white, will mean that your button is now invisible.

You can fix this by being explicit about what should happen on hover as shown in my answer here: How do I change the ripple background color on Button?.

Button source code (for full details on Material-UI's styling): https://github./mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.js