Merge pull request #813 from topcoder-platform/issue-808

Author: jmgasper

src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx

@@ -3,6 +3,7 @@ import {
     Dispatch,
     FC,
     FocusEvent,
+    KeyboardEvent,
     MouseEvent,
     MutableRefObject,
     ReactNode,
@@ -41,7 +42,9 @@ interface InputSelectProps {
 
 const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
     const triggerRef: MutableRefObject<any> = useRef(undefined)
+    const buttonRef: MutableRefObject<HTMLButtonElement | null> = useRef(null)
     const [menuIsVisible, setMenuIsVisible]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
+    const [isFocus, setIsFocus]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
 
     const selectedOption: InputSelectOption | undefined = props.options.find(option => option.value === props.value)
 
@@ -60,10 +63,17 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
         props.onChange({
             target: { value: option.value },
         } as unknown as ChangeEvent<HTMLInputElement>)
-        toggleMenu()
+        buttonRef.current?.focus() // this will close the dropdown menu
     }
 
-    function toggleIfNotDisabled(): void {
+    function toggleIfNotDisabled(event:
+        MouseEvent<HTMLButtonElement>
+        | FocusEvent<HTMLButtonElement>
+        | KeyboardEvent<HTMLButtonElement>
+        | undefined)
+    : void {
+        event?.stopPropagation()
+        event?.preventDefault()
         if (props.disabled) {
             return
         }
@@ -73,6 +83,12 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
 
     useClickOutside(triggerRef.current, () => setMenuIsVisible(false))
 
+    function handleKeyDown(event: KeyboardEvent<HTMLButtonElement> | undefined): void {
+        if (event?.key === 'Enter') {
+            toggleIfNotDisabled(event)
+        }
+    }
+
     return (
         <InputWrapper
             {...props}
@@ -84,19 +100,23 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
             className={styles['select-input-wrapper']}
             hideInlineErrors={props.hideInlineErrors}
             ref={triggerRef}
-            forceFocusStyle={menuIsVisible}
+            forceFocusStyle={menuIsVisible || isFocus}
         >
             <button
                 tabIndex={props.tabIndex}
                 className={styles.selected}
-                onClick={toggleIfNotDisabled}
+                onMouseDown={toggleIfNotDisabled}
+                onKeyDown={handleKeyDown}
                 type='button'
                 disabled={!!props.disabled}
                 onFocus={function onFocus(event: FocusEvent<HTMLButtonElement> | undefined) {
-                    event?.stopPropagation()
-                    event?.preventDefault()
-                    setMenuIsVisible(true)
+                    setIsFocus(true)
+                    toggleIfNotDisabled(event)
+                }}
+                onBlur={function onBlur() {
+                    setIsFocus(false)
                 }}
+                ref={buttonRef}
             >
                 <span className='body-small'>{selectedOption ? label(selectedOption) : ''}</span>
                 <span className='body-small'>{!selectedOption && !!props.placeholder ? props.placeholder : ''}</span>