modal with useClippy in it scrolls the page

[adammo94]

I encountered kinda strange behaviour, I made a fullscreen modal for my project, which has sharing buttons. facebook, twitter, reddit, mail and...copy of URL with use of your library. However when I click on a button that opens that modal and useClippy is not commented then it scrolls 640 pixels in Y axis somehow. When I comment and not use useClippy then it works perfectly fine.
without useClippy:

with (at the top you can see my bookmarks bar for reference):

faulty code:

const ShareModal = ({handleClose}) => {
  const url = 'http://www.google.com'
  const [clipboard, setClipboard] = useClippy()
  return (
    <Modal>
      <div className={styles.wrapper}>
          <div className={styles.close} onClick={handleClose}/>
          <h2 className={styles.title}>Share it!</h2>
          <FacebookShareButton url={`${url}`} className={styles.mediaLink} onClick={handleClose}>
            <FacebookIcon size={32} borderRadius={32}/> <span className={styles.mediaText}>Facebook</span>
          </FacebookShareButton>
          <TwitterShareButton url={`${url}`} className={styles.mediaLink} onClick={handleClose}>
            <TwitterIcon size={32} borderRadius={32}/> <span className={styles.mediaText}>Twitter</span>
          </TwitterShareButton>
          <RedditShareButton url={`${url}`} className={styles.mediaLink} onClick={handleClose}>
            <RedditIcon size={32} borderRadius={32}/> <span className={styles.mediaText}>Reddit</span>
          </RedditShareButton>
          <EmailShareButton url={`${url}`} className={styles.mediaLink} onClick={handleClose}>
            <EmailIcon size={32} borderRadius={32}/> <span className={styles.mediaText}>Mail</span>
          </EmailShareButton>
          <div url={`${url}`} className={styles.mediaLink} onClick={()=> {setClipboard(url); handleClose()}}>
            <img src={urlCopy} className={styles.mediaImage}/> <span className={styles.mediaText}>Copy link</span>
          </div>
      </div>
    </Modal>
    
  );
}

working code:

const ShareModal = ({handleClose}) => {
  const url = 'http://www.google.com'
  return (
    <Modal>
      <div className={styles.wrapper}>
          <div className={styles.close} onClick={handleClose}/>
          <h2 className={styles.title}>Share it!</h2>
          <FacebookShareButton url={`${url}`} className={styles.mediaLink} onClick={handleClose}>
            <FacebookIcon size={32} borderRadius={32}/> <span className={styles.mediaText}>Facebook</span>
          </FacebookShareButton>
          <TwitterShareButton url={`${url}`} className={styles.mediaLink} onClick={handleClose}>
            <TwitterIcon size={32} borderRadius={32}/> <span className={styles.mediaText}>Twitter</span>
          </TwitterShareButton>
          <RedditShareButton url={`${url}`} className={styles.mediaLink} onClick={handleClose}>
            <RedditIcon size={32} borderRadius={32}/> <span className={styles.mediaText}>Reddit</span>
          </RedditShareButton>
          <EmailShareButton url={`${url}`} className={styles.mediaLink} onClick={handleClose}>
            <EmailIcon size={32} borderRadius={32}/> <span className={styles.mediaText}>Mail</span>
          </EmailShareButton>
          <div url={`${url}`} className={styles.mediaLink} onClick={()=> {handleClose()}}>
            <img src={urlCopy} className={styles.mediaImage}/> <span className={styles.mediaText}>Copy link</span>
          </div>
      </div>
    </Modal>
    
  );
}

CSS (just in case):

.wrapper {
  display: flex;
  flex-direction: column;
  min-width: 280px;
  position: relative;
}

.mediaLink {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px !important;
  border-radius: 10px;
  cursor: pointer;
  &:not(:last-of-type) {
    margin: 0 0 8px;
  }
  &:hover {
    background: rgba(0,0,0,0.2) !important;
  }
  &:active, &:focus {
    background: rgba(0,0,0,0.4) !important;
    outline: none;
  }
}

.mediaText {
  margin: 0 0 0 16px;
}

.mediaImage {
  width: 32px;
  height: 32px;
  background: #006186;
  border-radius: 16px;

}

.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 10px;
  cursor: pointer;
  &::after {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    content: '';
    display: block;
    height: 12px;
    width: 2px;
    background: white;
  }
  &::before {
    position: absolute;
    content: '';
    display: block;
    height: 12px;
    width: 2px;
    background: white;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

[quisido]

This is probably due to the need to mount an invisible DOM node. The focusing on the invisible textarea likely causes the page to scroll to where that textarea mounted. The CSS for that textarea should probably float it in the visible screen instead of what it's currently doing. I'll keep this in mind for when I have time to investigate this, but for now I'm specifying this as a possible cause in case anyone wants to attempt to PR it. 😊