From fa3ceec3da7ef856bfd4f6db4b7d369e7562e829 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Mon, 27 Jan 2025 17:17:42 +0100
Subject: [PATCH] refactor(NcEmojiPicker): simplify clear button

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 .../NcEmojiPicker/NcEmojiPicker.vue           | 27 ++++++++-----------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/components/NcEmojiPicker/NcEmojiPicker.vue b/src/components/NcEmojiPicker/NcEmojiPicker.vue
index dbf2bb088b..b908443520 100644
--- a/src/components/NcEmojiPicker/NcEmojiPicker.vue
+++ b/src/components/NcEmojiPicker/NcEmojiPicker.vue
@@ -138,7 +138,7 @@ This component allows the user to pick an emoji.
 			v-bind="$attrs"
 			@keydown.native.tab.prevent="handleTabNavigationSkippingEmojis"
 			@select="select">
-			<template #searchTemplate="slotProps">
+			<template #searchTemplate="{ onSearch }">
 				<div class="search__wrapper">
 					<NcTextField ref="search"
 						class="search"
@@ -154,8 +154,8 @@ This component allows the user to pick an emoji.
 						@keydown.down="callPickerArrowHandlerWithScrollFix('onArrowDown', $event)"
 						@keydown.up="callPickerArrowHandlerWithScrollFix('onArrowUp', $event)"
 						@keydown.enter="$refs.picker.onEnter"
-						@trailing-button-click="clearSearch(); slotProps.onSearch(search);"
-						@update:value="slotProps.onSearch(search)" />
+						@trailing-button-click="clearSearch(); onSearch('');"
+						@update:value="onSearch(search)" />
 					<NcColorPicker palette-only
 						:container="container"
 						:palette="skinTonePalette"
@@ -358,10 +358,7 @@ export default {
 
 		clearSearch() {
 			this.search = ''
-			const input = this.$refs.search?.$refs.inputField?.$refs.input
-			if (input) {
-				input.focus()
-			}
+			this.$refs.search.focus()
 		},
 
 		/**
@@ -572,15 +569,13 @@ export default {
 </style>
 
 <style scoped lang="scss">
-.search {
-	&__wrapper {
-		display: flex;
-		flex-direction: row;
-		gap: var(--default-grid-baseline);
-		align-items: end;
-		padding-block: var(--default-grid-baseline);
-		padding-inline: calc(2 * var(--default-grid-baseline));
-	}
+.search__wrapper {
+	display: flex;
+	flex-direction: row;
+	gap: var(--default-grid-baseline);
+	align-items: end;
+	padding-block: var(--default-grid-baseline);
+	padding-inline: calc(2 * var(--default-grid-baseline));
 }
 
 .row-selected {