From d15c7104650ed57e95ae6c4a338d2244e8be8ea2 Mon Sep 17 00:00:00 2001
From: dat <dat.nguyen.supper@gmail.com>
Date: Wed, 12 Jul 2023 22:30:06 +0700
Subject: [PATCH] Onboarding - Tab order

---
 .../onboarding/src/components/modal-add-work/index.tsx |  2 +-
 .../form-input/input-select/InputSelect.tsx            | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/apps/onboarding/src/components/modal-add-work/index.tsx b/src/apps/onboarding/src/components/modal-add-work/index.tsx
index 487cd7244..caae72ec5 100644
--- a/src/apps/onboarding/src/components/modal-add-work/index.tsx
+++ b/src/apps/onboarding/src/components/modal-add-work/index.tsx
@@ -141,7 +141,7 @@ const ModalAddWork: FC<ModalAddWorkProps> = (props: ModalAddWorkProps) => {
                 </div>
                 <div className='full-width'>
                     <InputSelect
-                        tabIndex={1}
+                        tabIndex={0}
                         options={industryOptions}
                         value={workInfo.industry}
                         onChange={function onChange(event: any) {
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx b/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx
index 8be26c3d7..1b331f81c 100644
--- a/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx
+++ b/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx
@@ -78,13 +78,19 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
             hideInlineErrors={props.hideInlineErrors}
             ref={triggerRef}
         >
-            <div className={styles.selected} onClick={toggleIfNotDisabled}>
+            <button
+                tabIndex={props.tabIndex}
+                className={styles.selected}
+                onClick={toggleIfNotDisabled}
+                type='button'
+                disabled={!!props.disabled}
+            >
                 <span className='body-small'>{selectedOption ? label(selectedOption) : ''}</span>
                 <span className='body-small'>{!selectedOption && !!props.placeholder ? props.placeholder : ''}</span>
                 <span className={styles['selected-icon']}>
                     <IconOutline.ChevronDownIcon />
                 </span>
-            </div>
+            </button>
 
             <div className={styles['menu-wrap']}>
                 {menuIsVisible && (