Repository: laboratoriobridge/bold (ts)

Issue:
[SelectInput]  When the user clicks in the arrow, the cursor it not placed on the field.
## Component to amend
SelectInput

## Context
As our tests results showed, many users used to open the select field by clicking on the arrow and then, start typing.
It would help if the cursor was positioned in the field, after clicking on the arrow.
![Components _ Select - default ⋅ Storybook](https://user-images.githubusercontent.com/14251464/86811031-dbc28b80-c053-11ea-94ae-9be5f0397028.gif)


Pull request:
Focus Select input when clicking input icon
fixes #587 

Patch:
diff --git a/src/components/Select/SelectSingle/SelectSingle.tsx b/src/components/Select/SelectSingle/SelectSingle.tsx
index ae911b8da..5bef99714 100644
--- a/src/components/Select/SelectSingle/SelectSingle.tsx
+++ b/src/components/Select/SelectSingle/SelectSingle.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { useRef, useCallback } from 'react'
 
 import { useFormControl, UseFormControlProps } from '../../../hooks/useFormControl'
 import { useStyles } from '../../../styles'
@@ -65,6 +65,15 @@ export function SelectSingle<T>(props: SelectSingleProps<T>) {
   const inputProps = getFormControlInputProps()
   const invalid = inputProps['aria-invalid']
 
+  const handleInputIconClick = useCallback(
+    (isOpen: boolean) => () => {
+      if (!isOpen) {
+        internalInputRef.current.focus()
+      }
+    },
+    []
+  )
+
   return (
     <FormControl {...formControlProps}>
       <SelectDownshift<T>
@@ -100,7 +109,7 @@ export function SelectSingle<T>(props: SelectSingleProps<T>) {
               <div>
                 <TextInput
                   icon={downshiftOpen ? 'angleUp' : 'angleDown'}
-                  onIconClick={composeHandlers(toggleMenu, props.onIconClick)}
+                  onIconClick={composeHandlers(toggleMenu, handleInputIconClick(downshiftOpen), props.onIconClick)}
                   onClear={composeHandlers(clearSelection, props.onClear)}
                   invalid={invalid}
                   {...rest}


Test patch:
diff --git a/src/components/Select/SelectSingle/SelectSingle.test.tsx b/src/components/Select/SelectSingle/SelectSingle.test.tsx
index e64d71a48..c79c2ddfe 100644
--- a/src/components/Select/SelectSingle/SelectSingle.test.tsx
+++ b/src/components/Select/SelectSingle/SelectSingle.test.tsx
@@ -89,6 +89,18 @@ it('should preserve external onBlur and onFocus event handlers', () => {
   expect(focus).toHaveBeenCalledTimes(1)
 })
 
+it('should open menu and focus input when input icon is clicked', () => {
+  const { container } = render(<SelectTest />)
+  const iconButton = container.querySelector('button')
+  const input = container.querySelector('input')
+  expect(document.activeElement).toEqual(document.body)
+  fireEvent.click(iconButton)
+  expect(container.querySelector('ul')).toBeTruthy()
+  expect(document.activeElement).toEqual(input)
+  fireEvent.click(iconButton)
+  expect(container.querySelector('ul')).toBeFalsy()
+})
+
 describe('clear button', () => {
   it('should clear the input value', () => {
     const { container, getByTitle } = render(<SelectTest value={items[0]} />)