search

MatthewHerbst / react-to-print

Print React components in the browser. Supports Chrome, Safari, Firefox and EDGE
MIT License
2.15k stars 220 forks source link

State changes not effected fist time for print content #719

Closed keyboy21 closed 2 months ago

keyboy21 commented 4 months ago

To reproduce:

  1. Create a Project: Set up a React project and install the react-to-print package.
  2. Setup State and Component: Implement the state and component logic as shown above.
  3. Trigger State Change and Print: Update the state and trigger the print function, which will now correctly update and print the content.
  4. See passed state not added to print content. Trigger second time to see passed state to print.

Package versions: "react": "19.0.0-rc-8b08e99e-20240713", "react-dom": "19.0.0-rc-8b08e99e-20240713", "react-to-print": "^3.0.0-beta-1",

Minimal reproduction code

Prev related issue: #706

MatthewHerbst commented 4 months ago

Hmm. Similar to what you were doing in the onBeforePrint, I wouldn't expect setting state and then immediately printing to work well since setting state is async but you aren't waiting to ensure the state has been set before printing.

Here is a working version of the above: https://codesandbox.io/p/sandbox/react-to-print-beta-state-bug-forked-yc4w4j

MatthewHerbst commented 4 months ago

(Really appreciate you testing out the beta version, THANK YOU!)

keyboy21 commented 4 months ago

Yeah, since version 2 it works well and i'm use onBeforePrint only for applying styles. Please make your codesandbox version public, i have error: Sandbox not found

MatthewHerbst commented 4 months ago

Ah, try now, apologies, I always forget to make them public

keyboy21 commented 4 months ago

Image scenario that, we need select data to print before print, it will call print function on every set state changes (useEffect hell). I know we can solve this problem create another state to collect selected data, but it would be great it works out of box (like onBeforePrint to wait dom changes)

MatthewHerbst commented 4 months ago

Not sure I understand. In onBeforePrint to do it properly you also need to wait for the state change to set and only then resolve the Promise.

keyboy21 commented 4 months ago

I noticed that onBeforePrint not works

MatthewHerbst commented 4 months ago

I believe I see the issue, I will play around with it more tonight, thanks for your patience

MatthewHerbst commented 3 months ago

I just published v3.0.0-beta-2 which should resolve these issues. Please let me know if you are still running into problems, thank you!

keyboy21 commented 3 months ago

I tested version 3.0.0-beta-3, but the issues remain unresolved. Unfortunately, your fix is also not working as expected. When I attempted to run it, I encountered the following error in the browser console:

Unchecked runtime.lastError: The message port closed before a response was received.

For a minimal reproduction code example.

MatthewHerbst commented 3 months ago

You haven't taught react-to-print about the data state, so it doesn't know to wait to print until that is set. Here is a working example: https://codesandbox.io/p/sandbox/react-to-print-beta-3-forked-mp2qv7?file=%2Fsrc%2FApp.tsx%3A54%2C22