React-to-print: Print with check box checked

[jsbhakta]

I have been using this library and found an issue not sure if some one has noticed it or if i am missing something to print checkbox. but it seems when the print command executed it removed the checked sign out of checkbox.

__page with checkbox__

__Actual Print preview__

[dsbhakta]

Yes very good finding. I thought i was doing something wrong. good examples.

[ktulchinsky]

Super awesome, it should support checbox checked print

[purevsurenm]

I also see this issue. Not sure why. It is confusing when you fill up a form and print it, but the checkboxes you checked are unchecked.

[MatthewHerbst]

This is a very strange bug. Does anyone know of any other circumstances where similar behavior is seen? I'm trying to narrow down where I should be looking to solve this. Thanks for the reports!

[valeriozhang]

Any news on the this? Experiencing the same issue - only display checkboxes that have defaultValues

[MatthewHerbst]

@valeriozhang I've not been able to make any progress on this. My guess is it's something arcane. Do you have any ideas?

[kapilgundawar]

Hi Team,
iam also facing checkbox issue the moment i click on print,All my checked are removed.
Can someone please help in this

[valeriozhang]

@MatthewHerbst No sorry - haven't looked through the source. I just used CSS to modify my browser prints.

[MatthewHerbst]

@valeriozhang what CSS did you add?

[valeriozhang]

I didnt use the package.

@media print {
    body * {
      visibility: hidden;
    }

    #section-to-print, #section-to-print * {
      visibility: visible;
    }

    #section-to-print {
      /* position: absolute;
      left: 0;
      top: 0;
      bottom: 200 */
    }

}

[ibanjb]

In my current project, I'm using the pro.ant.design scaffolder and I found the same problem with the radio and check buttons, they are not well printed. Recently, I opened another issue in the ant-design repo https://github.com/ant-design/ant-design/issues/15980 and this is their response about that:

Seems it's bug of browser. We can do nothing about this. Close this as won't fix.
Please feel free if you have any idea to fix this

[aviklai]

Hi,

This works as it should but the react and react-dom versions have to be both 16.5 or above.
Looks like it was caused by a bug in react:
https://github.com/facebook/react/pull/13114

Here is a working example:
https://codesandbox.io/s/6xlqn5m7nr

@MatthewHerbst FYI

[MatthewHerbst]

Thanks @aviklai for finding that! I have been scratching my head on this one for months

[charles4221]

@MatthewHerbst @aviklai unfortunately this isn't completely resolved. I still have this issue on React & ReactDOM 16.14.
I opened up @aviklai's CodePen example above and edited it to have the checked value controlled by React state, as is the case for most React-driven forms in most applications, and then you can see the issue again where checked checkboxes are appearing unchecked in the print window.

[aviklai]

@charles4221 Hi, can you share the edited codesandbox?
I created an example where the checkbox is controlled by the state and it looks o.k.
https://codesandbox.io/s/react-to-print-forked-7smdp

[MatthewHerbst]

I am able to replicate. @aviklai in your example above, add an onClick to the checkbox to toggle the state. Toggle it to unchecked. Then try and print, and the print preview window still shows it as checked. Very strange

[aviklai]

@MatthewHerbst - I think the above PR should fix the issue.

[MatthewHerbst]

Published as v2.10.2, thanks 🎉

[charles4221]

@MatthewHerbst @aviklai wow, you guys work fast! Thank you so much for looking into this so quickly. I'll be able to update and re-test on Monday morning and I'll report back!