0

I have a problem copying text after the async method execution.

Here is my code: https://codesandbox.io/s/strange-dawn-4s0jy5?file=/src/App.js

 import copyClipboard from 'copy-text-to-clipboard'

 const delayTime = (ms: number) => new Promise((res) => setTimeout(res, ms))
 ---------------------------------------------------------------------------

 const copyText1= `copy text 1`
 copyClipboard(copyText1)

 await delayTime(5000)

 const copyText2= `copy text 2`
 copyClipboard(copyText2)

I always return a "Copy Text 1"

I expected my copy is "Copy Text 2". What's the solution?

Thanks

dacoten
  • 115
  • 2
  • 12
  • Why do you use delayTime? can you share the problem in codesandbox? – Alopwer Aug 22 '22 at 10:23
  • I think the user needs to interact with the page first. When I run the code provided I don't get any text in the clipboard. – evolutionxbox Aug 22 '22 at 10:27
  • @Alopwer Thank you for your reply. I have to wait around 5 seconds to check another API's status. If the API returns true, I will copy `copy text 2` – dacoten Aug 22 '22 at 10:27
  • @dacoten, anyway, it will be easier to say what's wrong if you share minimum reproducible example – Alopwer Aug 22 '22 at 10:29
  • @evolutionxbox Sure, I make a copy action from click on a Button. I make sure that CopyText1 is always returned. But after waiting for the SYNC function, I cannot copy from CopyText2. I have referred to another solution. But I don't understand because it is a C# solution https://stackoverflow.com/questions/68362438/get-clipboard-text-in-async-method – dacoten Aug 22 '22 at 10:31
  • @Alopwer: here we go. Please help me! https://codesandbox.io/s/strange-dawn-4s0jy5?file=/src/App.js – dacoten Aug 22 '22 at 10:38
  • @dacoten, for me the code works as expected, it copies copy text 1 then waits for 5 seconds and copies copy text 2 – Alopwer Aug 22 '22 at 10:40
  • @Alopwer in Firefox 104 only "copy text 1" is in the clipboard – evolutionxbox Aug 22 '22 at 10:46
  • `copy()` returns `false` for me the second time, so it fails to copy. It's a bit unfortunate that it doesn't give the reason as the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) would in the promise rejection. But the documentation of the `copy()` function does mention that is must be called in response to a user interaction, which isn't the case for the second one. There it is invoked by a `setTimeout()`. – Ivar Aug 22 '22 at 10:47
  • @dacoten, ok so it works 50/50, the function copy returns the boolean meaning if the text was copied, so for me it returns false sometimes, maybe it's the library issue – Alopwer Aug 22 '22 at 10:47
  • A solution for this will be to create a useEffect and a state for status, then when status changes just call copy function once again, and try to use native ClipboardApi instead of this library – Alopwer Aug 22 '22 at 10:49
  • @Ivar I wouldn't be surprised if the browser was blocking it as the user hasn't interacted with the page. When I click on the page during the test, both `copy()` return true. – evolutionxbox Aug 22 '22 at 10:49
  • @evolutionxbox For the initial one yes. But in the codesandbox OP provided, the initial copy works while the second one doesn't. – Ivar Aug 22 '22 at 11:34

0 Answers0