[material-ui] useMediaQuery('print') doesn't work when print started from window.print

[robert-skarzycki]

• [X] The issue is present in the latest release.
• [X] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Demo: https://codesandbox.io/embed/gifted-bohr-cxrdm

Chrome: useMediaQuery('print') matches only when print is started with Ctrl+P or Print chosen from browser's menu. When print is started from window.print method - it doesn't match. (See headings on sample.)

Firefox: useMediaQuery('print') never matches.

Expected Behavior 🤔

I expect to useMediaQuery('print') to match for all "printing situations", regardless it is started from "browser user action" or "programmatically". And it should work on Firefox in general. In attached demo - I expect to have "This should be hidden with useMediaQuery." paragraph to be hidden in all "printing situations".

Steps to Reproduce 🕹

See demo: https://codesandbox.io/embed/gifted-bohr-cxrdm Try to print via browser (Ctrl+P or Print from main menu) or via button "print via window.print" to see how it behaves.

Context 🔦

I'm trying to hide some elements for printing. Some blocks may be wrapped with <Box displayPrint="none"> - and it works. Sometimes I need to have "lower level" flag determining if this is print view, so I want to utilize useMediaQuery('print') - to avoid adding extra divs to DOM (what Box does).

Your Environment 🌎

Tech	Version
Material-UI	v4.4.3
React	16.8.4
Browser	Firefox 69.0.1, Chrome 77.0.3865.90

[oliviertassinari]

It seems that we should update the demo to remove the print use case. It's not working: https://bugzilla.mozilla.org/show_bug.cgi?id=774398 nor it will anytime soon. There is an interesting comment in this 7 years old thread, the spec doesn't mention which document it should listen to. Firefox creates a new one when it prints.

[oliviertassinari]

Instead of print, we can mention dark mode preference or motion reduction preference in the docs. We can also warn about print not being supported well. cc @joshwooding.

[oliviertassinari]

The issue is solved since Firefox 105: proof https://cxrdm.csb.app/. Once this version has enough adoption, we should remove:

https://mui.com/material-ui/react-use-media-query/#basic-media-query.

This will likely be once we update https://mui.com/material-ui/getting-started/supported-platforms/#browser for v6.

Thank @ztoben for the heads-up in https://github.com/yocontra/react-responsive/issues/246#issuecomment-1253728141.

[oliviertassinari]

We can now remove the docs mentioned, it's noise since thz minimum Firefox version support is v115 with Material UI v6 https://mui.com/material-ui/getting-started/supported-platforms/#browser