javascript - Document is not focused

Question

In the following

import { useState, useEffect } from 'react'
import { FacebookShareButton, FacebookIcon } from "react-share";
import KakaoShareButton from './kakaoShareButton'
import styles from './socialMediaButtons.module.scss'

export default function SocialMediaButtons({ article }): JSX.Element {
  const [currentUrl, setCurrentUrl] = useState('')
  const copyURLMessage = () => {
    alert('copied.')
  }
  useEffect(() => {
    setCurrentUrl(window.location.href)
  }, [])

  return (
    <div className={styles.socialMediaButtonsRow}>
      <KakaoShareButton article={article}/>
      <FacebookShareButton url={currentUrl}>
        <FacebookIcon size={36} />
      </FacebookShareButton>
      <button onClick={() => {
        navigator.clipboard.writeText(currentUrl); copyURLMessage()
      }}>
        URL
      </button>
    </div>
  )
}

After clicking on my button with the onClick function, I get the following message in my console

Uncaught (in promise) DOMException: Document is not focused

Everything still works, but I don't understand why this error is appearing. What can I do to remove it?

Answer 1

等待大神答复