Nextcloud VUE app with dialogs while having notifications in nextcloud is broken

đź’» Development
, ,
1
Support intro

Sorry to hear you’re facing problems :slightly_frowning_face:

help.nextcloud.com is for home/non-enterprise users. If you’re running a business, paid support can be accessed via portal.nextcloud.com where we can ensure your business keeps running smoothly.

In order to help you as quickly as possible, before clicking Create Topic please provide as much of the below as you can. Feel free to use a pastebin service for logs, otherwise either indent short log examples with four spaces:

example

Or for longer, use three backticks above and below the code snippet:

longer
example
here

Some or all of the below information will be requested if it isn’t supplied; for fastest response please provide as much as you can :heart:

Nextcloud version (eg, 20.0.5): Nextcloud Hub 7 (28.0.2) (same error applies to 26.0.11
Operating system and version (eg, Ubuntu 20.04): Ubuntu 22.04.1 LTS
Apache or nginx version (eg, Apache 2.4.25): Apache/2.4.52
PHP version (eg, 7.4): PHP 8.1.2-1ubuntu2.14 (cli)

The issue you are facing:
Nextcloud does not allow opening popup dialogs when I have unread notifications in nextcloud.
If I read all my notifications, it’s no problem. But if I have a notification, the popups won’t ever show until I click on notifications. This is EXTREMLY irritating, and I don’t know how to fix it.
I have created my APP for nextcloud with dialog popups where the main App.vue is in a <template><div data-app class=“v-application”></div></template>

but it makes no difference. How can I resolve this issue? I have used the template(s) from nextcloud to create my vue apps.

If using vuetify in your app for example, if the dialog is in the root, then “EAGER” attribute solves it… But if you use for example a v-select or things similar then, it won’t work.

Is this the first time you’ve seen this error? (Y/N):
N

Steps to replicate it:

  1. Create a nextcloud app and deploy it to your nextcloud
  2. Make sure you have notification un-read/un-watched/un-opened
  3. Try to open a dialog in your app. (it won’t show until you click on the notification bell)

The output of your Nextcloud log in Admin > Logging:

N/A This has nothing to do with logging, this is strictly javascript/vue error

The output of your config.php file in /path/to/nextcloud (make sure you remove any identifiable information!):

N/A

The output of your Apache/nginx/system log in /var/log/____:

N/A

N/A


Output errors in nextcloud.log in /var/www/ or as admin user in top right menu, filtering for errors. Use a pastebin service if necessary.

N/A
2

Is there any error/warning logged in the brwoser’s console?

What version of the NPM package @nextcloud/vue are you using?

3

There is no error in js console… And for example if I click notices (the bell), I will directly see the popup.

If I do not have any notices in nextcloud, the popups work correctly.

There is something like the nextcloud notices swallows my dialogues.

I am using: “@nextcloud/vue”: “^7.12.6”,

4

Do you by chance have a minimal working example? Is the app published (as source code) yet?

I’d like to test it a bit. For sure, I can create an app from scartch to play with it but it might be faster to use your code.

5

I can provide source code in a few days.

1 Like
6

We got the same error with our app and the notifications app.
Our current Versions are:

Nextcloud: 29.0.2
Nextcloud Hub: 8
Vue: 2.6.14
Vuetify: ^2.7.1

We got the problem when the user has at least one notification available.

Our app contains some v-dialog components from vuetify which are translated into html code as:

<div role=”dialog” aria-modal=”true” ….> … </div>

Now we observed that these dialog html elements are created inside the first li html element of the notifications which contains a data-app attribute. In that case our html v-dialog element becomes a child of said notification html element.

If the user opens the list of notifications he can see our v-dialog element overlapping the notification-list.

Another occurrence of the same problem with the notifications occurs when the user tries to open a vuetify v-list component. This time however, the v-list is not rendered in the notifications like the error before.

A third occurrence of the problem appears when the user tried to open a vuetify v-menu component. This time however, clicking on the bell icon button to open the notification list in nextcloud results that we can briefly see the v-menu component in the closing animation in the lower right corner of our app.

We compared our current version of nextcloud and its behaviour regarding the problems with the nextcloud version 24.0.12. In that version of nextcloud these problems did not occur.

We then checked for differences between the two versions of nextcloud and found out, that in version 24.0.12 a notification in the notification list exists as a html element as follows:

<div data-v-7df7d6b8="" data-v-082f9351="" data-id="14443" data-timestamp="1702368472000" class="notification" notification_id="14443" object_type="room" object_id="iu9pzv5d">

In version 29.0.2 it differs as follows:

<li data-v-7bac7eb4="" data-v-280ff602="" data-id="105" data-timestamp="1719482934000" data-object-type="admin_notifications" data-app="admin_notifications" class="notification">

We found out that by removing the data-app attribute from each notification before triggering the instantiation of one of our v-dialog components, that the problem did no longer occur. So we believe that the data-app attribute is responsible for this behaviour.

As a side note: Our app is wrapped inside a v-app element which is getting resolved to a div html element with the attribute data-app=”true”.

Is it necessary for the notifications app to have the data-app attribute? As the data-<some-name> attributes are user defined attributes, could it be a solution to rename the data-app attribute to something like data-nextloud-<some-name> attribute? Maybe using a naming prefix for those data attributes could be usefull in general.