From 3e4f5227b6c902f3a4431a21aad397b93a1791be Mon Sep 17 00:00:00 2001
From: Jason Chuang <jchuang@2fi-solutions.com.hk>
Date: Fri, 13 Mar 2026 04:20:27 +0800
Subject: [PATCH] button add keyboard control

---
 src/pages/GazetteIssue/index.js               | 23 +++++++++++++---
 src/pages/Holiday/index.js                    | 23 +++++++++++++---
 src/pages/Proof/Create_FromApp/ProofForm.js   | 21 ++++++++++++---
 .../auth-forms/BusCustomFormWizard.js         | 27 ++++++++++++++++---
 4 files changed, 79 insertions(+), 15 deletions(-)

diff --git a/src/pages/GazetteIssue/index.js b/src/pages/GazetteIssue/index.js
index 1fe4cc8..3138bc4 100644
--- a/src/pages/GazetteIssue/index.js
+++ b/src/pages/GazetteIssue/index.js
@@ -52,6 +52,7 @@ const Index = () => {
     const [waitDownload, setWaitDownload] = React.useState(false);
     const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
     const [warningText, setWarningText] = React.useState("");
+    const fileInputRef = React.useRef(null);
 
     React.useEffect(() => {
         setOnSearchReady(false);
@@ -186,13 +187,27 @@ const Index = () => {
                             <Stack direction="row" justifyContent="flex-start" alignItems="center" spacing={2} sx={{ ml: 2, mt: 1 }}>
                                 <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                                     <Button
-                                        component="label"
                                         variant="contained"
                                         size="large"
                                         disabled={waitImport}
+                                        type="button"
+                                        onClick={() => {
+                                            if (fileInputRef.current) {
+                                                fileInputRef.current.click();
+                                            }
+                                        }}
+                                        onKeyDown={(event) => {
+                                            if (event.key === 'Enter' || event.key === ' ') {
+                                                event.preventDefault();
+                                                if (fileInputRef.current) {
+                                                    fileInputRef.current.click();
+                                                }
+                                            }
+                                        }}
                                     >
                                         <Typography variant="h5">Upload Files</Typography>
-                                        <input
+                                    </Button>
+                                    <input
                                         id="uploadFileBtn"
                                         name="file"
                                         type="file"
@@ -201,8 +216,8 @@ const Index = () => {
                                         disabled={waitImport}
                                         onChange={readFile}
                                         aria-label={intl.formatMessage({ id: 'ariaUploadExcelFile' })}
-                                        />
-                                    </Button>
+                                        ref={fileInputRef}
+                                    />
                                 </ThemeProvider>
                             </Stack>
                         </Grid>
diff --git a/src/pages/Holiday/index.js b/src/pages/Holiday/index.js
index 60f9fd4..164d244 100644
--- a/src/pages/Holiday/index.js
+++ b/src/pages/Holiday/index.js
@@ -51,6 +51,7 @@ const Index = () => {
     const [waitDownload, setWaitDownload] = React.useState(false);
     const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);
     const [warningText, setWarningText] = React.useState("");
+    const fileInputRef = React.useRef(null);
 
     React.useEffect(() => {
         setOnSearchReady(false);
@@ -181,13 +182,27 @@ const Index = () => {
                             {isGrantedAny(["MAINTAIN_GAZETTE_ISSUE"]) ?
                                 <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
                                     <Button
-                                        component="label"
                                         variant="contained"
                                         size="large"
                                         disabled={waitImport}
+                                        type="button"
+                                        onClick={() => {
+                                            if (fileInputRef.current) {
+                                                fileInputRef.current.click();
+                                            }
+                                        }}
+                                        onKeyDown={(event) => {
+                                            if (event.key === 'Enter' || event.key === ' ') {
+                                                event.preventDefault();
+                                                if (fileInputRef.current) {
+                                                    fileInputRef.current.click();
+                                                }
+                                            }
+                                        }}
                                     >
                                         <Typography variant="h5">Upload Files</Typography>
-                                        <input
+                                    </Button>
+                                    <input
                                         id="uploadFileBtn"
                                         name="file"
                                         type="file"
@@ -196,8 +211,8 @@ const Index = () => {
                                         disabled={waitImport}
                                         onChange={readFile}
                                         aria-label={intl.formatMessage({ id: 'ariaUploadExcelFile' })}
-                                        />
-                                    </Button>
+                                        ref={fileInputRef}
+                                    />
                                 </ThemeProvider>
                                 : null
                             }
diff --git a/src/pages/Proof/Create_FromApp/ProofForm.js b/src/pages/Proof/Create_FromApp/ProofForm.js
index 2ac34d1..d9f1d2c 100644
--- a/src/pages/Proof/Create_FromApp/ProofForm.js
+++ b/src/pages/Proof/Create_FromApp/ProofForm.js
@@ -42,6 +42,7 @@ const FormPanel = ({ formData }) => {
 
     const [proofPaymentDeadlineMin, setProofPaymentDeadlineMin] = React.useState({});
     const [reviseDeadlineMin, setReviseDeadlineMin] = React.useState({});
+    const fileInputRef = React.useRef(null);
 
     const navigate = useNavigate()
 
@@ -278,12 +279,26 @@ const FormPanel = ({ formData }) => {
                     </Grid>
                     <Grid item xs={12} md={12}>
                         <Button
-                            component="label"
                             variant="contained"
                             size="large"
                             disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)}
+                            type="button"
+                            onClick={() => {
+                                if (fileInputRef.current) {
+                                    fileInputRef.current.click();
+                                }
+                            }}
+                            onKeyDown={(event) => {
+                                if (event.key === 'Enter' || event.key === ' ') {
+                                    event.preventDefault();
+                                    if (fileInputRef.current) {
+                                        fileInputRef.current.click();
+                                    }
+                                }
+                            }}
                         >
-                        <Typography variant="h5">Upload Files</Typography>
+                            <Typography variant="h5">Upload Files</Typography>
+                        </Button>
                         <input
                             id="uploadFileBtn"
                             name="file"
@@ -293,8 +308,8 @@ const FormPanel = ({ formData }) => {
                             disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)}
                             onChange={readFile}
                             aria-label={intl.formatMessage({ id: 'ariaUploadPdfFile' })}
+                            ref={fileInputRef}
                         />
-                        </Button>
                     </Grid>
                     <Grid item xs={12} md={12}>
                         <UploadFileTable
diff --git a/src/pages/authentication/auth-forms/BusCustomFormWizard.js b/src/pages/authentication/auth-forms/BusCustomFormWizard.js
index ff09d28..ed221ac 100644
--- a/src/pages/authentication/auth-forms/BusCustomFormWizard.js
+++ b/src/pages/authentication/auth-forms/BusCustomFormWizard.js
@@ -1,4 +1,4 @@
-import { useEffect, useState, } from 'react';
+import { useEffect, useState, useRef } from 'react';
 
 // material-ui
 import {
@@ -100,6 +100,7 @@ const BusCustomFormWizard = (props) => {
     const [termsAndConNotAccept, setTermsAndConNotAccept] = useState(false);
     const [isValid, setisValid] = useState(false);
     const [checkCountry, setCheckCountry] = useState(false);
+    const fileInputRef = useRef(null);
     const username = document.getElementById("username-login")
     const [checkUsername, setCheckUsername] = useState(false);
     const [checkUsernameBlur, setCheckUsernameBlur] = useState(false)
@@ -1480,8 +1481,26 @@ const BusCustomFormWizard = (props) => {
                                                 {/* <Typography display="inline" variant="h6" sx={{ fontSize: 12,color: 'primary.primary'}}>如: 香港身份證; 護照; 中國內地身份證等</Typography>           */}
                                                 <Stack mt={1} direction="row" justifyContent="flex-start" alignItems="center" spacing={2}>
                                                     <ThemeProvider theme={PNSPS_LONG_BUTTON_THEME}>
-                                                    <Button variant="contained" component="label" sx={{ height: '40px' }}>
-                                                        <FormattedMessage id="uploadFile"/>
+                                                        <Button
+                                                            variant="contained"
+                                                            sx={{ height: '40px' }}
+                                                            type="button"
+                                                            onClick={() => {
+                                                                if (fileInputRef.current) {
+                                                                    fileInputRef.current.click();
+                                                                }
+                                                            }}
+                                                            onKeyDown={(event) => {
+                                                                if (event.key === 'Enter' || event.key === ' ') {
+                                                                    event.preventDefault();
+                                                                    if (fileInputRef.current) {
+                                                                        fileInputRef.current.click();
+                                                                    }
+                                                                }
+                                                            }}
+                                                        >
+                                                            <FormattedMessage id="uploadFile" />
+                                                        </Button>
                                                         <input
                                                             accept="image/png, .jpg, .bmp, .pdf"
                                                             //className={classes.input}
@@ -1489,9 +1508,9 @@ const BusCustomFormWizard = (props) => {
                                                             multiple
                                                             type="file"
                                                             onChange={handleFileUpload}
+                                                            ref={fileInputRef}
                                                             style={{ display: 'none' }}
                                                         />
-                                                    </Button>
                                                     </ThemeProvider>
                                                     {/* <Typography display="inline" variant="h6" sx={{ fontSize: 12, color: 'primary.primary'}}></Typography>           */}
                                                 </Stack>