QPopupProxy should be used when you need either a QMenu (on bigger screens) or a QDialog (on smaller screens) to be displayed. It acts as a proxy which picks either of the two components to use. QPopupProxy also handles context-menus.
Usage
Use your browsers development tools to toggle the device between mobile or desktop (with browser refresh after each change) or, physically resize your browser’s window to watch the QPopupProxy component switch between either a QMenu or a QDialog before clicking/tapping on its container. The default breakpoint is set at 450px.
Standard
Context menu
Breakpoint
On the example below, click on the icon in the input.
Pass-through props
Keep in mind that all props from both QMenu and QDialog are passed through via this component. So props like offset or transition-show (as a mere example) can be used in conjunction with QPopupProxy.
QPopupProxy treats some components (QDate, QTime, QCarousel and QColor) as special ones and forces cover: true and maxHeight: '99vh' on them. If you don’t want this behavior just place a div as the first level child of QPopupProxy.
Accessibility v2.25+
QPopupProxy has no semantics of its own — it exposes whatever the rendered component provides. Below the breakpoint that is a QDialog (role="dialog" with a managed aria-modal), above it a QMenu (a positioned container that deliberately claims no ARIA role). See QDialog’s Accessibility section and QMenu’s Accessibility section for what each mode announces and how it handles keyboard interaction and focus.
Just like props, attributes fall through to whichever component is currently active — and that includes role. A role you intend for menu mode (e.g. role="menu") would, under the breakpoint, land on the QDialog and replace its role="dialog". If you need to declare a role, put it on an element inside the popup content (such as the wrapping QList) rather than on QPopupProxy itself.