Resolve #3220

src/client/app/common/views/components/emoji-picker.vue

@@ -3,19 +3,19 @@
 	<header>
 		<button v-for="category in categories"
 			:title="category.text"
-			@click="go(category.ref)"
+			@click="go(category)"
 			:class="{ active: category.isActive }"
 		>
 			<fa :icon="category.icon" fixed-width/>
 		</button>
 	</header>
-	<div class="emojis" ref="emojis" @scroll.passive="onScroll">
-		<section v-for="category in categories" :ref="category.ref">
-			<header><fa :icon="category.icon" fixed-width/> {{ category.text }}</header>
-			<div v-if="category.name">
-				<button v-for="emoji in Object.entries(lib).filter(([k, v]) => v.category === category.name)"
+	<div class="emojis">
+		<header><fa :icon="categories.find(x => x.isActive).icon" fixed-width/> {{ categories.find(x => x.isActive).text }}</header>
+		<div v-if="categories.find(x => x.isActive).name">
+			<button v-for="emoji in Object.entries(lib).filter(([k, v]) => v.category === categories.find(x => x.isActive).name)"
 				:title="emoji[0]"
 				@click="chosen(emoji[1].char)"
+				:key="emoji[0]"
 			>
 				<mk-emoji :emoji="emoji[1].char"/>
 			</button>
@@ -28,7 +28,6 @@
 				<img :src="emoji.url" :alt="emoji.name"/>
 			</button>
 		</div>
-		</section>
 	</div>
 </div>
 </template>
@@ -48,55 +47,46 @@ export default Vue.extend({
 			lib,
 			customEmojis: [],
 			categories: [{
-				ref: 'customEmojiSection',
 				text: this.$t('custom-emoji'),
 				icon: faAsterisk,
 				isActive: true
 			}, {
 				name: 'people',
-				ref: 'peopleSection',
 				text: this.$t('people'),
 				icon: ['far', 'laugh'],
 				isActive: false
 			}, {
 				name: 'animals_and_nature',
-				ref: 'animalsAndNatureSection',
 				text: this.$t('animals-and-nature'),
 				icon: faLeaf,
 				isActive: false
 			}, {
 				name: 'food_and_drink',
-				ref: 'foodAndDrinkSection',
 				text: this.$t('food-and-drink'),
 				icon: faUtensils,
 				isActive: false
 			}, {
 				name: 'activity',
-				ref: 'activitySection',
 				text: this.$t('activity'),
 				icon: faFutbol,
 				isActive: false
 			}, {
 				name: 'travel_and_places',
-				ref: 'travelAndPlacesSection',
 				text: this.$t('travel-and-places'),
 				icon: faCity,
 				isActive: false
 			}, {
 				name: 'objects',
-				ref: 'objectsSection',
 				text: this.$t('objects'),
 				icon: faDice,
 				isActive: false
 			}, {
 				name: 'symbols',
-				ref: 'symbolsSection',
 				text: this.$t('symbols'),
 				icon: faHeart,
 				isActive: false
 			}, {
 				name: 'flags',
-				ref: 'flagsSection',
 				text: this.$t('flags'),
 				icon: faFlag,
 				isActive: false
@@ -109,15 +99,9 @@ export default Vue.extend({
 	},
 
 	methods: {
-		go(ref) {
-			this.$refs.emojis.scrollTop = this.$refs[ref][0].offsetTop;
-		},
-
-		onScroll(e) {
-			for (const x of this.categories) {
-				const top = e.target.scrollTop;
-				const el = this.$refs[x.ref][0];
-				x.isActive = el.offsetTop <= top && el.offsetTop + el.offsetHeight > top;
+		go(category) {
+			for (const c of this.categories) {
+				c.isActive = c.name === category.name;
 			}
 		},
 
@@ -156,7 +140,6 @@ export default Vue.extend({
 		overflow-y auto
 		overflow-x hidden
 
-		> section
 		> header
 			position sticky
 			top 0