UX: Improve `VCombobox` menu rendering in dialogs #2437

New issue

Open

opened 2026-02-20 01:11:29 -05:00 by deekerman · 3 comments

deekerman commented

2026-02-20 01:11:29 -05:00

Owner

Originally created by @lastzero on GitHub (Nov 10, 2025).

Originally assigned to: @graciousgrey, @omerdduran on GitHub.

As a developer, I would like to adjust the VCombobox menu properties so that the VMenu renders inside an existing dialog overlay rather than being teleported to the root overlay container.

Currently, the .v-menu, which is created by the .v-combobox component, is rendered in a dedicated .v-overlay container when focused. This is not a problem on regular pages like /library/people/new i.e. without a focus trap.
However, with the new automatic focus trap in place, we had to add a workaround to common/view.js so that .v-menu works even when rendered outside the active dialog (since the dialog loses focus whenever the menu appears in a new .v-overlay container, which the focus trap would usually prevent):
github.com/photoprism/photoprism@05e4fdf67c/frontend/src/common/view.js (L737-L753)
Ideally, the .v-menu that lists the names available for the .v-combobox would be rendered inside the current .v-overlay when used in a dialog component, such as the photo edit dialog:
github.com/photoprism/photoprism@05e4fdf67c/frontend/src/component/photo/edit/people.vue (L75-L96)

This generally shouldn't be a big issue—but getting it right requires experimenting with the available VCombobox and VMenu properties, e.g., activator, attach, contained, target, scrim, and z-index:

Bonus: It would be great if this also solved the positioning issues of the menu on mobile devices. This is likely a result of the menu being attached to a separate overlay container.

Testing: At a minimum, the changes must be tested and proven to be compatible with Google Chrome, Chromium, Firefox, and Safari on desktop and mobile devices running iOS/Android.

Documentation: Changes should be documented with inline code comments and, if needed, in frontend/src/common/README.md to align the View Helper Guidelines with the updated implementation.

Originally created by @lastzero on GitHub (Nov 10, 2025). Originally assigned to: @graciousgrey, @omerdduran on GitHub. **As a developer, I would like to adjust the `VCombobox` menu properties so that the `VMenu` renders inside an existing dialog overlay rather than being teleported to the root overlay container.** - Currently, the `.v-menu`, which is created by the `.v-combobox` component, is rendered in a dedicated `.v-overlay` container when focused. This is not a problem on regular pages like [`/library/people/new`](https://github.com/photoprism/photoprism/blob/develop/frontend/src/page/people/new.vue) i.e. without a focus trap. - However, with the [new automatic focus trap](https://github.com/photoprism/photoprism/blob/develop/frontend/src/common/README.md) in place, we had to add a workaround to `common/view.js` so that `.v-menu` works even when rendered [outside the active dialog](https://github.com/photoprism/photoprism/blob/develop/frontend/src/component/photo/edit/people.vue) (since the dialog loses focus whenever the menu appears in a new `.v-overlay` container, which the focus trap would usually prevent): https://github.com/photoprism/photoprism/blob/05e4fdf67cf6fe880bfbbdd19c69faba47597069/frontend/src/common/view.js#L737-L753 - Ideally, the `.v-menu` that lists the names available for the `.v-combobox` would be rendered inside the current `.v-overlay` when used in a dialog component, such as the [photo edit dialog](https://github.com/photoprism/photoprism/blob/develop/frontend/src/component/photo/edit/people.vue): https://github.com/photoprism/photoprism/blob/05e4fdf67cf6fe880bfbbdd19c69faba47597069/frontend/src/component/photo/edit/people.vue#L75-L96 This generally shouldn't be a big issue—but getting it right requires experimenting with the available `VCombobox` and `VMenu` properties, e.g., `activator`, `attach`, `contained`, `target`, `scrim`, and `z-index`: - https://vuetifyjs.com/en/api/v-menu/#props - https://vuetifyjs.com/en/api/v-combobox/#props - [View Helper / Focus Management Guidelines](https://github.com/photoprism/photoprism/blob/develop/frontend/src/common/README.md) **Bonus:** It would be great if this also solved the positioning issues of the menu on mobile devices. This is likely a result of the menu being attached to a separate overlay container. **Testing:** At a minimum, the changes must be tested and proven to be compatible with **Google Chrome, Chromium, Firefox, and Safari** on desktop and mobile devices running iOS/Android. **Documentation:** Changes should be documented with inline code comments and, if needed, in [`frontend/src/common/README.md`](https://github.com/photoprism/photoprism/blob/develop/frontend/src/common/README.md) to align the [View Helper](https://github.com/photoprism/photoprism/blob/develop/frontend/src/common/view.js) Guidelines with the updated implementation. #### Related Issues - https://github.com/photoprism/photoprism/issues/5145 - https://github.com/photoprism/photoprism/pull/5307

deekerman added the

in-progress

faces

labels

2026-02-20 01:11:29 -05:00

deekerman commented

2026-02-20 01:11:30 -05:00

Author

Owner

@lastzero commented on GitHub (Nov 11, 2025):

Note that the search input element in the location selector dialog also needs to be fixed:

The list that opens appears to be rendered in a dedicated .v-overlay container, and the focus trap now prevents that.

@lastzero commented on GitHub (Nov 11, 2025): Note that the search input element in the location selector dialog also needs to be fixed: <img width="914" height="656" alt="Image" src="https://github.com/user-attachments/assets/6fdd00ba-d664-428b-93cc-262626e4884e" /> The list that opens appears to be rendered in a dedicated `.v-overlay` container, and the focus trap now prevents that.

deekerman commented

2026-02-20 01:11:30 -05:00

Author

Owner

@lastzero commented on GitHub (Nov 11, 2025):

@omerdduran @graciousgrey Be sure to check all dialogs for components like <v-autocomplete>, <v-menu>, and <v-combobox> that might render and/or focus outside their dialog container/overlay. Thank you! 🤗

@lastzero commented on GitHub (Nov 11, 2025): @omerdduran @graciousgrey Be sure to check all dialogs for components like `<v-autocomplete>`, `<v-menu>`, and `<v-combobox>` that might render and/or focus outside their dialog container/overlay. Thank you! 🤗

deekerman commented

2026-02-20 01:11:31 -05:00

Author

Owner

@lastzero commented on GitHub (Nov 12, 2025):

@omerdduran Note that I mainly added the background scrim (scrim: true) to ensure only one name menu is open at the same time. However, that is not quite ideal in the Photo Edit Dialog, especially if we want to render the VMenu with contained: true i.e. inside the dialog overlay:

github.com/photoprism/photoprism@b8bdd707d6/frontend/src/component/photo/edit/people.vue (L142-L158)

From what I understand, the main issue with open and opening name menus could have been openOnClick: true, which we might not need when we already openOnFocus: true:

openOnClick: true also completely broke the menu in Firefox. Since the default is true in component/defaults.js, keep in in mind that you need to explicitly disabled if needed (the defaults are meant for the regular action menu e.g. in page toolbars, although we might ultimately also not need openOnClick there - to be investigated on mobile and desktop browsers):

github.com/photoprism/photoprism@b8bdd707d6/frontend/src/component/defaults.js (L86-L100)

👉️ I suggested testing different menu settings in the Photo Edit Dialog one more time, with scrim: false and openOnClick: false, to see if that improves the user experience on mobile devices without breaking functionality on desktop browsers like Chrome and Firefox. Also, try rendering the menu inside the dialog's People tab, e.g. in combination with a higher zIndex and/or a custom attach or contained setting.

@lastzero commented on GitHub (Nov 12, 2025): @omerdduran Note that I mainly added the background scrim (`scrim: true`) to ensure **only one** name menu is open at the same time. However, that is not quite ideal in the *Photo Edit Dialog*, especially if we want to render the `VMenu` with `contained: true` i.e. **inside the dialog** overlay: https://github.com/photoprism/photoprism/blob/b8bdd707d6a5c2735b6bc370c928219d34820c2d/frontend/src/component/photo/edit/people.vue#L142-L158 From what I understand, the main issue with open and opening name menus could have been `openOnClick: true`, which we might not need when we already `openOnFocus: true`: - https://vuetifyjs.com/en/api/v-menu/#props-open-on-click - https://vuetifyjs.com/en/api/v-menu/#props-open-on-focus `openOnClick: true` also completely broke the menu in Firefox. Since the default is true in `component/defaults.js`, keep in in mind that you need to explicitly disabled if needed (the defaults are meant for the regular action menu e.g. in page toolbars, although we might ultimately also **not** need `openOnClick` there - to be investigated on mobile and desktop browsers): https://github.com/photoprism/photoprism/blob/b8bdd707d6a5c2735b6bc370c928219d34820c2d/frontend/src/component/defaults.js#L86-L100 👉️ **I suggested testing different menu settings in the *Photo Edit Dialog* one more time, with `scrim: false` and `openOnClick: false`, to see if that improves the user experience on mobile devices without breaking functionality on desktop browsers like Chrome and Firefox. Also, try rendering the menu inside the dialog's People tab, e.g. in combination with a higher `zIndex` and/or a custom [`attach`](https://vuetifyjs.com/en/api/v-menu/#props-attach) or `contained` setting.**