The Tab key is not opening the drop downs in Education and Experience pages

Author: suppermancool

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,13 +84,19 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
             className={styles['select-input-wrapper']}
             hideInlineErrors={props.hideInlineErrors}
             ref={triggerRef}
+            forceFocusStyle={menuIsVisible}
         >
             <button
                 tabIndex={props.tabIndex}
                 className={styles.selected}
                 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>

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' && (