fix(ContactDetailsAvatar): tabbing

[GVodyanov]

Fix #5579

🤖 AI (if applicable)

• The content of this PR was partly or fully generated using AI

[codecov]

Codecov Report

❌ Patch coverage is 0% with 4 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...components/ContactDetails/ContactDetailsAvatar.vue	0.00%	4 Missing ⚠️

📢 Thoughts on this report? Let us know!

[odzhychko]

Code works and fixes the linked issue.

[odzhychko]

suggestion(non-blocking): Replace showCropper with cropperSrc. Avoids $nextTick and simplifies code overall.

diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
index 68ac0e89f..cddfa8424 100644
--- a/src/components/ContactDetails/ContactDetailsAvatar.vue
+++ b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -30,10 +30,11 @@
                        :url="photoUrl"
                        class="contact-header-avatar__photo" />
 
-               <NcModal v-if="showCropper" size="small" @close="cancel">
+               <NcModal v-if="cropperSrc" size="small" @close="cancel">
                        <div class="avatar__container">
                                <h2>{{ t('contacts', 'Crop contact photo') }}</h2>
                                <VueCropper
+                                       :src="cropperSrc"
                                        ref="cropper"
                                        class="avatar__cropper"
                                        v-bind="cropperOptions" />
@@ -179,7 +180,7 @@ export default {
                        loading: false,
                        photoUrl: undefined,
                        root: generateRemoteUrl(`dav/files/${getCurrentUser().uid}`),
-                       showCropper: false,
+                       cropperSrc: undefined,
                        cropperOptions: {
                                aspectRatio: 1 / 1,
                                viewMode: 3,
@@ -252,7 +253,7 @@ export default {
                                }
                        }
 
-                       await this.openCropper(data, type)
+                       this.openCropper(data, type)
                        return true
                },
 
@@ -262,11 +263,8 @@ export default {
                 * @param {Buffer} data the image
                 * @param {string} type of the image
                 */
-               async openCropper(data, type) {
-                       const ccc = `data:${type};base64,${data.toString('base64')}`
-                       this.showCropper = true
-                       await this.$nextTick()
-                       this.$refs.cropper.replace(ccc)
+               openCropper(data, type) {
+                       this.cropperSrc = `data:${type};base64,${data.toString('base64')}`
                },
 
                /**
@@ -417,7 +415,7 @@ export default {
                 * Save the cropped image
                 */
                saveAvatar() {
-                       this.showCropper = false
+                       this.cropperSrc = undefined
                        this.loading = true
 
                        this.$refs.cropper.getCroppedCanvas({
@@ -455,7 +453,7 @@ export default {
                 * Cancel cropping
                 */
                cancel() {
-                       this.showCropper = false
+                       this.cropperSrc = undefined
                        this.loading = false
                },