replace composable method with onMounted hook

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

3 files changed, 26 insertions, 23 deletions

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index df7874fc9..d72efbbaa 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -205,6 +205,7 @@
 
 <script>
 import debounce from 'debounce'
+import { ref } from 'vue'
 
 import AtIcon from 'vue-material-design-icons/At.vue'
 import DotsVertical from 'vue-material-design-icons/DotsVertical.vue'
@@ -275,11 +276,15 @@ export default {
 	],
 
 	setup() {
-		const { initializeNavigation, mountArrowNavigation } = useArrowNavigation()
+		const leftSidebar = ref(null)
+		const searchBox = ref(null)
+
+		const { initializeNavigation } = useArrowNavigation(leftSidebar, searchBox)
 
 		return {
 			initializeNavigation,
-			mountArrowNavigation,
+			leftSidebar,
+			searchBox,
 		}
 	},
 
@@ -400,7 +405,6 @@ export default {
 		EventBus.$once('conversations-received', this.handleUnreadMention)
 		EventBus.$on('route-change', this.onRouteChange)
 		EventBus.$on('joined-conversation', this.handleJoinedConversation)
-		this.mountArrowNavigation(this.$refs.leftSidebar, this.$refs.searchBox)
 	},
 
 	beforeDestroy() {
diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
index 5f533b66a..d9e2e1863 100644
--- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue
@@ -57,6 +57,7 @@
 
 <script>
 import debounce from 'debounce'
+import { ref } from 'vue'
 
 import Close from 'vue-material-design-icons/Close.vue'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
@@ -90,11 +91,15 @@ export default {
 	},
 
 	setup() {
-		const { initializeNavigation, mountArrowNavigation } = useArrowNavigation()
+		const wrapper = ref(null)
+		const setContacts = ref(null)
+
+		const { initializeNavigation } = useArrowNavigation(wrapper, setContacts)
 
 		return {
 			initializeNavigation,
-			mountArrowNavigation,
+			wrapper,
+			setContacts,
 		}
 	},
 
@@ -139,7 +144,6 @@ export default {
 
 	mounted() {
 		this.$nextTick(() => {
-			this.mountArrowNavigation(this.$refs.wrapper, this.$refs.setContacts)
 			// Focus the input field of the current component.
 			this.focusInput()
 			// Perform a search with an empty string
@@ -208,8 +212,7 @@ export default {
 			}
 		},
 		focusInput() {
-			// TODO : revert this to call this.$refs.setContacts.$el.focus() after the release
-			this.$refs.setContacts.$refs.inputField.$refs.input.focus()
+			this.setContacts.focus()
 		},
 	},
 }
diff --git a/src/composables/useArrowNavigation.js b/src/composables/useArrowNavigation.js
index 9e7a6325f..eab5748b8 100644
--- a/src/composables/useArrowNavigation.js
+++ b/src/composables/useArrowNavigation.js
@@ -19,7 +19,7 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ref } from 'vue'
+import { onMounted, ref, unref } from 'vue'
 
 /**
  * Mount navigation according to https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus
@@ -29,26 +29,23 @@ import { ref } from 'vue'
  * Escape key - to return focus to the default element, if one of the items is focused already
  * Backspace key - to return focus to the default element, if one of the items is focused already
  *
+ * @param {import('vue').Ref | HTMLElement} listElementRef component ref to mount navigation
+ * @param {import('vue').Ref} defaultElementRef component ref to return focus to // Vue component
+ * @param {object} options navigation options
+ * @param {boolean} [options.confirmEnter=false] flag to confirm Enter click
  */
-export function useArrowNavigation() {
+export function useArrowNavigation(listElementRef, defaultElementRef, options = { confirmEnter: false }) {
 	const listRef = ref(null)
 	const defaultRef = ref(null)
 	const itemElements = ref([])
 	const focusedIndex = ref(null)
 	const isConfirmationEnabled = ref(null)
 
-	/**
-	 * Add event listeners for navigation list and set a default focus element
-	 *
-	 * @param {import('vue').Ref} listElementRef component ref to mount navigation
-	 * @param {import('vue').Ref} defaultElementRef component ref to return focus to
-	 * @param {object} options navigation options
-	 * @param {boolean} [options.confirmEnter=false] flag to confirm Enter click
-	 */
-	function mountArrowNavigation(listElementRef, defaultElementRef, options = { confirmEnter: false }) {
+	// Add event listeners for navigation list and set a default focus element
+	onMounted(() => {
 		// depending on ref, listElementRef could be either a component or a DOM element
-		listRef.value = listElementRef?.$el ?? listElementRef
-		defaultRef.value = defaultElementRef
+		listRef.value = unref(listElementRef)?.$el ?? unref(listElementRef)
+		defaultRef.value = unref(defaultElementRef)
 		isConfirmationEnabled.value = options.confirmEnter
 
 		listRef.value.addEventListener('keydown', (event) => {
@@ -64,7 +61,7 @@ export function useArrowNavigation() {
 				}
 			}
 		})
-	}
+	})
 
 	/**
 	 * Collect all DOM elements specified by selector
@@ -175,6 +172,5 @@ export function useArrowNavigation() {
 
 	return {
 		initializeNavigation,
-		mountArrowNavigation,
 	}
 }