fix(#170): open countries popup on input focus (#18)

src/features/Combobox/index.tsx

@@ -23,6 +23,7 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
     id,
     label,
     labelWidth,
+    openOnFocus,
     pattern,
     required,
   } = props
@@ -37,7 +38,7 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
   } = useCombobox(props)
 
   return (
-    <ComboboxStyled onSelect={onOptionSelect}>
+    <ComboboxStyled openOnFocus={openOnFocus} onSelect={onOptionSelect}>
       <Label
         labelWidth={labelWidth}
         htmlFor={id}

src/features/Combobox/types.tsx

@@ -16,6 +16,7 @@ export type Props<T> = Pick<InputHTMLAttributes<HTMLInputElement>, (
   labelWidth?: number,
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void,
   onSelect?: (option: T | null) => void,
+  openOnFocus?: boolean,
   options: Array<T>,
   value?: string,
 }

src/features/Register/components/RegistrationStep/hooks/useCountries.tsx

@@ -4,6 +4,7 @@ import {
   useMemo,
 } from 'react'
 
+import orderBy from 'lodash/orderBy'
 import map from 'lodash/map'
 
 import type { Countries } from 'requests'
@@ -33,10 +34,13 @@ export const useCountries = () => {
   const nameField = `name_${lang}` as 'name_eng'
 
   const transformedCountries = useMemo(
-    () => map(countries, (country) => ({
-      id: country.id,
-      name: country[nameField],
-    })),
+    () => orderBy(
+      map(countries, (country) => ({
+        id: country.id,
+        name: country[nameField],
+      })),
+      'name',
+    ),
     [countries, nameField],
   )
 

src/features/Register/components/RegistrationStep/index.tsx

@@ -75,6 +75,7 @@ export const RegistrationStep = () => {
       />
       <Combobox
         required
+        openOnFocus
         id={formIds.country}
         label='Страна'
         labelWidth={labelWidth}