From 57c5a6ca77b9426004efb30c081fe25150d2ca9e Mon Sep 17 00:00:00 2001
From: dat <dat.nguyen.supper@gmail.com>
Date: Thu, 20 Jul 2023 12:22:12 +0700
Subject: [PATCH] The Tab key is not opening the drop downs in Education and
 Experience pages

---
 .../form-groups/form-input/input-select/InputSelect.tsx    | 7 +++++++
 .../form-groups/form-input/input-wrapper/InputWrapper.tsx  | 4 ++++
 2 files changed, 11 insertions(+)

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 09525fe57..cd3bcce02 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
@@ -2,6 +2,7 @@ import {
     ChangeEvent,
     Dispatch,
     FC,
+    FocusEvent,
     MouseEvent,
     MutableRefObject,
     ReactNode,
@@ -83,6 +84,7 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
             className={styles['select-input-wrapper']}
             hideInlineErrors={props.hideInlineErrors}
             ref={triggerRef}
+            forceFocusStyle={menuIsVisible}
         >
             <button
                 tabIndex={props.tabIndex}
@@ -90,6 +92,11 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
                 onClick={toggleIfNotDisabled}
                 type='button'
                 disabled={!!props.disabled}
+                onFocus={function onFocus(event: FocusEvent<HTMLButtonElement> | undefined) {
+                    event?.stopPropagation()
+                    event?.preventDefault()
+                    setMenuIsVisible(true)
+                }}
             >
                 <span className='body-small'>{selectedOption ? label(selectedOption) : ''}</span>
                 <span className='body-small'>{!selectedOption && !!props.placeholder ? props.placeholder : ''}</span>
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-wrapper/InputWrapper.tsx b/src/libs/ui/lib/components/form/form-groups/form-input/input-wrapper/InputWrapper.tsx
index 2d86800bb..90090679e 100644
--- a/src/libs/ui/lib/components/form/form-groups/form-input/input-wrapper/InputWrapper.tsx
+++ b/src/libs/ui/lib/components/form/form-groups/form-input/input-wrapper/InputWrapper.tsx
@@ -25,6 +25,7 @@ interface InputWrapperProps {
     readonly label: string | JSX.Element
     readonly tabIndex?: number
     readonly type: 'checkbox' | 'password' | 'rating' | 'text' | 'textarea'
+    readonly forceFocusStyle?: boolean
 }
 
 const InputWrapper: ForwardRefExoticComponent<InputWrapperProps & { ref?: React.Ref<HTMLDivElement> }>
@@ -43,6 +44,9 @@ const InputWrapper: ForwardRefExoticComponent<InputWrapperProps & { ref?: React.
         focusStyle,
         showError ? styles['input-error'] : undefined,
         props.className,
+        {
+            [styles.focus]: props.forceFocusStyle,
+        },
     )
 
     const renderCheckboxLabel: () => JSX.Element | boolean = () => props.type === 'checkbox' && (