From 2a976a0de499ba33186a52a6bd2c10a709b86fee Mon Sep 17 00:00:00 2001
From: Vardan Hakobyan <vardan_live@live.com>
Date: Mon, 22 Aug 2022 13:22:22 +0400
Subject: [PATCH] fix: trigger the `onChange` event of qr code uploading input
 when clicking on the button (#1421)

---
 .../app/components/QRCodeReader.jsx                    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/Packages/Editors/org.standardnotes.token-vault/app/components/QRCodeReader.jsx b/packages/components/src/Packages/Editors/org.standardnotes.token-vault/app/components/QRCodeReader.jsx
index 935d2f159..ac972d3ad 100644
--- a/packages/components/src/Packages/Editors/org.standardnotes.token-vault/app/components/QRCodeReader.jsx
+++ b/packages/components/src/Packages/Editors/org.standardnotes.token-vault/app/components/QRCodeReader.jsx
@@ -28,6 +28,12 @@ const convertToGrayScale = (imageData) => {
 }
 
 export default class QRCodeReader extends React.Component {
+  constructor() {
+    super()
+
+    this.fileInputRef = React.createRef(null)
+  }
+
   onImageSelected = (evt) => {
     const file = evt.target.files[0]
     const url = URL.createObjectURL(file)
@@ -70,9 +76,9 @@ export default class QRCodeReader extends React.Component {
   render() {
     return (
       <div className="qr-code-reader-container">
-        <div className="sk-button info">
+        <div className="sk-button info" onClick={() => this.fileInputRef.current.click()}>
           <div className="sk-label">Upload QR Code</div>
-          <input type="file" style={{ display: 'none' }} onChange={this.onImageSelected} />
+          <input type="file" style={{ display: 'none' }} ref={this.fileInputRef} onChange={this.onImageSelected} />
         </div>
       </div>
     )