JavaScript

This is Header.js where I have the button <ReactSvg>, inside <IconButton> when you click it, it will change the page theme with the switchTheme() function. When you hover over the button it also has a popover where it declares the function of the button (ex. switch theme).

For some reason I hover the button the popover comes out but doesn’t let me click on the button even if I click very fast and vigorously. Somehow the popover has disabled the button.

Header file where the button is rendered:

import React, { useState } from 'react'
import ReactSvg from './reactSvg'
import { Box, Typography, Link, Container, IconButton } from '@material-ui/core'
import PhoneIcon from '@material-ui/icons/Phone'
import EmailIcon from '@material-ui/icons/Email'
import GitHubIcon from '@material-ui/icons/GitHub'
import LinkedInIcon from '@material-ui/icons/LinkedIn'
import { useStyles } from '../styles/customStyles'
import Image from 'material-ui-image'
import PopOver from './PopOver'

const styles = {
  image: {
    maxWidth: 200,
    minWidth: 200,
  },
}

export default function Header({ switchTheme }) {
  const classes = useStyles()
  const [anchorEl, setAnchorEl] = useState(null)

  const handleTheme = () => {
    switchTheme()
  }

  const handleHover = (e) => {
    setAnchorEl(e.currentTarget)
  }

  return (
    <>
      <Box>
        <IconButton onClick={() => handleTheme()} onMouseOver={(e) => handleHover(e)}>
          <ReactSvg />
        </IconButton>
        <Typography variant="h3" color="primary">
          Staz Christodoulakis
        </Typography>
        <Typography variant="body1" color="primary">
          Software Engineer · Web/App
        </Typography>
        <hr className="solid" />

        <Box
          display="flex"
          alignItems="center"
          justifyContent="center"
          className={classes.root}
          flexWrap="wrap"
        >
          <Link color="secondary" variant="body1" href="tel: 650-409-6202">
            <Box display="flex">
              <PhoneIcon /> 650 409 6202
            </Box>
          </Link>
          <Link color="secondary" variant="body1" href="mailto: staz.christo@gmail.com">
            <Box display="flex">
              <EmailIcon /> staz.christo@gmail.com
            </Box>
          </Link>
          <Link href="https://github.com/stazcp" color="secondary" variant="body1">
            <Box display="flex">
              <GitHubIcon /> github.com/stazcp
            </Box>
          </Link>
          <Link href="https://www.linkedin.com/in/staz-christo" color="secondary" variant="body1">
            <Box display="flex">
              <LinkedInIcon /> linkedin.com/in/staz-christo
            </Box>
          </Link>
        </Box>
      </Box>
      <PopOver anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
    </>
  )
}

Popover:

import React, { useState, useEffect } from 'react'
import { makeStyles } from '@material-ui/core/styles'
import Popover from '@material-ui/core/Popover'
import Typography from '@material-ui/core/Typography'
import Button from '@material-ui/core/Button'

const useStyles = makeStyles((theme) => ({
  typography: {
    padding: theme.spacing(2),
  },
}))

export default function SimplePopover({ anchorEl, setAnchorEl }) {
  const classes = useStyles()

  const handleClose = () => {
    setAnchorEl(null)
  }

  const open = Boolean(anchorEl)
  const id = open ? 'simple-popover' : undefined

  return (
    <div>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
      >
        <Typography className={classes.typography}>
          Click on React Symbol to change theme!
        </Typography>
      </Popover>
    </div>
  )
}

Why is that the onMouseOver event blocking the onClick event?

Answer

So I found a solution to my problem by using a Tooltip provided by Material UI. https://material-ui.com/components/tooltips/

Like this:

     <Tooltip title="Click Me!" placement="right" arrow>
      <IconButton
        onClick={() => handleTheme()}
        // onMouseOver={(e) => handleHover(e)}
      >
        <GetIcon icon={reactLogo} className="reactLogo" />
      </IconButton>
    </Tooltip>

if anyone has managed to use different methods for mouse events on Material UI buttons please post here. Thanks!

Material-UI popover triggered by onMouseOver is blocking onClick event of button – React.js

Advertisement

Answer