From 207933ed70b0815a1cb4575c7f1e8878887368d8 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 14 Aug 2024 11:22:51 +0530
Subject: [PATCH] fix: TypeError cannot read properties of undefined (reading
 '$el') (#9951)

# Pull Request Template

## Description

This PR will fix an error `TypeError cannot read properties of undefined
(reading '$el')` with the keyboard shortcut `Alt+KeyA` for triggering
the file picker.

**Issue**
I couldn't able reproduce this issue. It might be because `$children`
was unavailable at the time of access.

**Solution**
Previously, it relied on `$children`. Now, it uses the more reliable
`querySelector` method to find the target element.

Fixes
https://chatwoot-p3.sentry.io/issues/5708410274/?alert_rule_id=15157525&alert_timestamp=1723552508790&alert_type=email&environment=production&notification_uuid=be5966b2-f17d-4273-8709-98e3322f1f6f&project=4507182691975168&referrer=alert_email

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

**Test cases**
1. Open a conversation
2. And click `Alt+KeyA` to trigger the file picker.
3. See if there is any issue or errors.


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../widgets/WootWriter/ReplyBottomPanel.vue      | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index 168f2448a..e4ab0b41d 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -116,29 +116,27 @@ export default {
   setup() {
     const { setSignatureFlagForInbox, fetchSignatureFlagFromUISettings } =
       useUISettings();
+
     const uploadRef = ref(null);
     // TODO: This is really hacky, we need to replace the file picker component with
     // a custom one, where the logic and the component markup is isolated.
     // Once we have the custom component, we can remove the hacky logic below.
-    const uploadTriggerButton = computed(() => {
-      if (uploadRef.value) {
-        return uploadRef.value.$children[1].$el;
-      }
-
-      return null;
-    });
+    const uploadRefElem = computed(() => uploadRef.value?.$el);
 
     const keyboardEvents = {
       'Alt+KeyA': {
         action: () => {
-          uploadTriggerButton.value.click();
+          const uploadTriggerButton = document.querySelector(
+            '#conversationAttachment'
+          );
+          uploadTriggerButton.click();
         },
         allowOnFocusedInput: true,
       },
     };
 
     watchEffect(() => {
-      useKeyboardEvents(keyboardEvents, uploadTriggerButton);
+      useKeyboardEvents(keyboardEvents, uploadRefElem);
     });
 
     return {