search

nygardk / react-share

Social media share buttons and share counts for React
MIT License
2.6k stars 429 forks source link

onClick event not firing when clicking outside either an image or directly on the text #492

Open aggaton opened 1 year ago

aggaton commented 1 year ago

I am using react-share like this with some material ui elements. Things work fine if I click directly on either icon or the text, however if I click outside near the edge of the button onClick event is not firing. It seems that since EmailShareButton handles all the click events it should be able to detect it anywhere that is part of the inside of that component, I see the mouse cursor changes so I assume it is clickable.

      <EmailShareButton url={link}>
          <Button className={clsx(classes.row)} >
              <EmailIcon
                  size={32}
                   />
          <Typography className={clsx(classes.text)}>
                   Email
           </Typography>
          </Button>
      </EmailShareButton>

menuRow and menuText has some styling, something like this

        row: {
            display: "flex",
            flexWrap: "nowrap",
            justifyContent: "flex-start",
            alignItems: "center",
            flexDirection: "row",
        },

        text: {
            paddingRight: "16px !important",
            fontFamily: "Source Sans Pro !important",
            fontStyle: "normal !important",
            fontWeight: "600 !important" as any,
            fontSize: "16px !important",
            lineHeight: "20px !important",
            display: "flex",
            alignItems: "center",
            color: grey,
            '&:hover': {
                background: off-white + " !important",
                color: black + " !important",
            },
        },