Fix element selectors fix #368

src/components/EmojiPickerContainer/EmojiPickerContainer.vue

@@ -37,6 +37,7 @@
 
 <script>
 import SvgIcon from '../SvgIcon/SvgIcon'
+import { findParentBySelector } from '../../utils/element-selector'
 
 export default {
 	name: 'EmojiPickerContainer',
@@ -121,9 +122,7 @@ export default {
 		},
 		setEmojiPickerPosition(clientY, innerWidth, innerHeight) {
 			const mobileSize = innerWidth < 500 || innerHeight < 700
-			const roomFooterRef = document
-				.querySelector('vue-advanced-chat')
-				.shadowRoot.getElementById('room-footer')
+			const roomFooterRef = findParentBySelector(this.$el, '#room-footer')
 
 			if (!roomFooterRef) {
 				if (mobileSize) this.emojiPickerRight = '-50px'

src/lib/Room/Room.vue

@@ -335,15 +335,11 @@ export default {
 				this.observer.disconnect()
 			}
 
-			const loader = document
-				.querySelector('vue-advanced-chat')
-				.shadowRoot.getElementById('infinite-loader-messages')
+			const loader = this.$el.querySelector('#infinite-loader-messages')
 
 			if (loader) {
 				const options = {
-					root: document
-						.querySelector('vue-advanced-chat')
-						.shadowRoot.getElementById('messages-list'),
+					root: this.$el.querySelector('#messages-list'),
 					rootMargin: `${this.scrollDistance}px`,
 					threshold: 0
 				}

src/lib/Room/RoomFooter/RoomEmojis/RoomEmojis.vue

@@ -1,10 +1,6 @@
 <template>
 	<transition name="vac-slide-up">
-		<div
-			v-if="filteredEmojis.length"
-			class="vac-emojis-container"
-			:style="{ bottom: `${footerHeight}px` }"
-		>
+		<div v-if="filteredEmojis.length" class="vac-emojis-container">
 			<div
 				v-for="(emoji, index) in filteredEmojis"
 				:key="emoji"
@@ -37,14 +33,6 @@ export default {
 		}
 	},
 
-	computed: {
-		footerHeight() {
-			return document
-				.querySelector('vue-advanced-chat')
-				.shadowRoot.getElementById('room-footer').clientHeight
-		}
-	},
-
 	watch: {
 		filteredEmojis(val, oldVal) {
 			if (!oldVal.length || val.length !== oldVal.length) {

src/lib/Room/RoomFooter/RoomFiles/RoomFiles.vue

@@ -3,7 +3,6 @@
 		<div
 			v-if="files.length"
 			class="vac-room-files-container"
-			:style="{ bottom: `${footerHeight}px` }"
 		>
 			<div class="vac-files-box">
 				<div v-for="(file, i) in files" :key="i">
@@ -49,11 +48,6 @@ export default {
 	emits: ['remove-file', 'reset-message'],
 
 	computed: {
-		footerHeight() {
-			return document
-				.querySelector('vue-advanced-chat')
-				.shadowRoot.getElementById('room-footer').clientHeight
-		}
 	}
 }
 </script>

src/lib/Room/RoomFooter/RoomMessageReply/RoomMessageReply.vue

@@ -3,7 +3,6 @@
 		<div
 			v-if="messageReply"
 			class="vac-reply-container"
-			:style="{ bottom: `${footerHeight}px` }"
 		>
 			<div class="vac-reply-box">
 				<div class="vac-reply-info">
@@ -98,11 +97,6 @@ export default {
 	emits: ['reset-message'],
 
 	computed: {
-		footerHeight() {
-			return document
-				.querySelector('vue-advanced-chat')
-				.shadowRoot.getElementById('room-footer').clientHeight
-		},
 		firstFile() {
 			return this.messageReply?.files?.length ? this.messageReply.files[0] : {}
 		},

src/lib/Room/RoomFooter/RoomTemplatesText/RoomTemplatesText.vue

@@ -3,7 +3,6 @@
 		<div
 			v-if="filteredTemplatesText.length"
 			class="vac-template-container vac-app-box-shadow"
-			:style="{ bottom: `${footerHeight}px` }"
 		>
 			<div
 				v-for="(template, index) in filteredTemplatesText"
@@ -44,14 +43,6 @@ export default {
 		}
 	},
 
-	computed: {
-		footerHeight() {
-			return document
-				.querySelector('vue-advanced-chat')
-				.shadowRoot.getElementById('room-footer').clientHeight
-		}
-	},
-
 	watch: {
 		filteredTemplatesText(val, oldVal) {
 			if (!oldVal.length || val.length !== oldVal.length) {

src/lib/Room/RoomFooter/RoomUsersTag/RoomUsersTag.vue

@@ -1,10 +1,6 @@
 <template>
 	<transition name="vac-slide-up">
-		<div
-			v-if="filteredUsersTag.length"
-			class="vac-tags-container"
-			:style="{ bottom: `${footerHeight}px` }"
-		>
+		<div v-if="filteredUsersTag.length" class="vac-tags-container">
 			<div
 				v-for="(user, index) in filteredUsersTag"
 				:key="user._id"
@@ -46,14 +42,6 @@ export default {
 		}
 	},
 
-	computed: {
-		footerHeight() {
-			return document
-				.querySelector('vue-advanced-chat')
-				.shadowRoot.getElementById('room-footer').clientHeight
-		}
-	},
-
 	watch: {
 		filteredUsersTag(val, oldVal) {
 			if (!oldVal.length || val.length !== oldVal.length) {

src/lib/Room/RoomMessage/AudioPlayer/AudioPlayer.vue

@@ -62,9 +62,7 @@ export default {
 	},
 
 	mounted() {
-		this.player = document
-			.querySelector('vue-advanced-chat')
-			.shadowRoot.getElementById(this.playerUniqId)
+		this.player = this.$el.querySelector('#' + this.playerUniqId)
 
 		this.player.addEventListener('ended', () => {
 			this.isPlaying = false

src/lib/Room/RoomMessage/MessageActions/MessageActions.vue

@@ -90,6 +90,7 @@ import vClickOutside from '../../../../utils/on-click-outside'
 
 import SvgIcon from '../../../../components/SvgIcon/SvgIcon'
 import EmojiPickerContainer from '../../../../components/EmojiPickerContainer/EmojiPickerContainer'
+import { findParentBySelector } from '../../../../utils/element-selector'
 
 export default {
 	name: 'MessageActions',
@@ -170,9 +171,7 @@ export default {
 			if (!this.optionsOpened) return
 
 			setTimeout(() => {
-				const roomFooterRef = document
-					.querySelector('vue-advanced-chat')
-					.shadowRoot.getElementById('room-footer')
+				const roomFooterRef = findParentBySelector(this.$el, '#room-footer')
 
 				if (
 					!roomFooterRef ||

src/lib/RoomsList/RoomsList.vue

@@ -170,15 +170,11 @@ export default {
 				this.observer.disconnect()
 			}
 
-			const loader = document
-				.querySelector('vue-advanced-chat')
-				.shadowRoot.getElementById('infinite-loader-rooms')
+			const loader = this.$el.querySelector('#infinite-loader-rooms')
 
 			if (loader) {
 				const options = {
-					root: document
-						.querySelector('vue-advanced-chat')
-						.shadowRoot.getElementById('rooms-list'),
+					root: this.$el.querySelector('#rooms-list'),
 					rootMargin: `${this.scrollDistance}px`,
 					threshold: 0
 				}

src/utils/element-selector.js

@@ -0,0 +1,8 @@
+export function findParentBySelector(node, selector) {
+  while (node && !node.querySelector(selector)) {
+      node = node.parentNode
+      const element = node.querySelector(selector)
+      if (element) return element
+  }
+  return null
+}