Modal component doesn't work twice

[StCyr]

Hi,

I'm using the Modal component to display attached images in the "social" application.

For some reasons, images aren't displayed when the user tries to display them a second time: the Modal component shows a black screen with only the "x" icon in the top-right corner.

Do i use the component wrong, or is it some kind of limitation?

Thanks for the help,

Cyrille

Steps to reproduce the issue

1. Install the social app
2. have a timeline containing posts with attachments
3. click on a thumbnail to display an attachment
4. Confirm the image is shown properly using the Modal component
5. Close the Modal
6. Click the thumbnail again
7. Confirm that the Modal component only displays a black screen

Additional info

Here's where I use the component:

https://github.com/nextcloud/social/blob/master/src/components/PostAttachment.vue

[skjnldsv]

Any error in logs?

[juliushaertl]

Hm, I can reproduce that with the modal example code in https://nextcloud-vue-components.netlify.com/#/Components?id=modal

Seems this is cause by using v-show to trigger the modal, switching to v-if fixes it.

@skjnldsv Any idea why this is an issue?

[skjnldsv]

I would say because we do not detect the modal hide/show other than on mounted?
https://github.com/nextcloud/nextcloud-vue/blob/fe4e53f6b1335422571dca579149c7cee2078857/src/components/Modal/Modal.vue#L278-L279

[StCyr]

Seems this is cause by using v-show to trigger the modal, switching to v-if fixes it.

It seems that I can't use $refs anymore when using v-if

        <masonry>
                <div v-for="(item, index) in attachments" :key="index">
                        <img :src="OC.generateUrl('/apps/social/document/get/resized?id=' + item.id)" @click="showModal(index)">
                </div>
                <modal v-if="modal" :has-previous="current > 0" :has-next="current < (attachments.length - 1)"
                        size="full" @close="closeModal" @previous="showPrevious"
                        @next="showNext">
                        <div class="modal__content">
                                <canvas ref="modalCanvas" />
                        </div>
                </modal>
        </masonry>

I'm suddenly getting TypeError: "canvas is undefined" when I click on a masonry component after changing v-show to v-if...

[skjnldsv]

TypeError: "canvas is undefined"

Well you named your ref "modalCanvas" not "canvas" :p

[StCyr]

no, that's not the issue, I've:

                       var canvas = this.$refs.modalCanvas
                        var ctx = canvas.getContext('2d')

It seems to be caused by the fact that v-if doesn't create the DOM element unless needed while v-show always creates it and just toggles the display CSS property.

[skjnldsv]

Ah yes indeed, you cannot use an item inside if v-if is false.

[StCyr]

and $refs is not reactive :-(

[skjnldsv]

@StCyr I think this needs to be fixed from the modal component, not yours :)

[StCyr]

I've studied more what's happening when opening/closing a modal:

1- When opening a page with a modal component, the modal component's element with class modal-mask has a style "display: none;" and its children element with class modal-wrapper has a style "";
2- When opening the modal component, the element with class modal-mask remove its style "display: none;" effectively displaying the modal;
3- When closing the modal component, the element with class modal-mask sets its style back to "display: none;" and also sets the style of its modal-wrapper children element to "display:none;"
4- When opening the modal component again, the element with class modal-mask remove its style "display: none;" but not the one of its modal-wrapper children element

This explains why the modal component's content is show only once.

Now, I have no idea how to fix this.

[skjnldsv]

I'll try to take a look this week if I have time :)
Use v-if while you can. We can sit down at the conference and try to see how we can fix this 😉

[StCyr]

I'll try to take a look this week if I have time :)
Use v-if while you can. We can sit down at the conference and try to see how we can fix this 😉

yeah, using v-if solves the issue.

Hope to see you there :-)