From 332249e29d9ff8f3853367757cc25a3faac965b1 Mon Sep 17 00:00:00 2001
From: Mirlan <m.maksitaliev@gmail.com>
Date: Mon, 29 Jun 2020 20:48:33 +0600
Subject: [PATCH] fix(#170): open countries popup on input focus (#18)

---
 src/features/Combobox/index.tsx                      |  3 ++-
 src/features/Combobox/types.tsx                      |  1 +
 .../RegistrationStep/hooks/useCountries.tsx          | 12 ++++++++----
 .../Register/components/RegistrationStep/index.tsx   |  1 +
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/features/Combobox/index.tsx b/src/features/Combobox/index.tsx
index 13f8693f..6bdd71f7 100644
--- a/src/features/Combobox/index.tsx
+++ b/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}
diff --git a/src/features/Combobox/types.tsx b/src/features/Combobox/types.tsx
index 4b8d5de9..89255672 100644
--- a/src/features/Combobox/types.tsx
+++ b/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,
 }
diff --git a/src/features/Register/components/RegistrationStep/hooks/useCountries.tsx b/src/features/Register/components/RegistrationStep/hooks/useCountries.tsx
index d4c5b479..aba3a00a 100644
--- a/src/features/Register/components/RegistrationStep/hooks/useCountries.tsx
+++ b/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],
   )
 
diff --git a/src/features/Register/components/RegistrationStep/index.tsx b/src/features/Register/components/RegistrationStep/index.tsx
index 61062fe9..2819bc7e 100644
--- a/src/features/Register/components/RegistrationStep/index.tsx
+++ b/src/features/Register/components/RegistrationStep/index.tsx
@@ -75,6 +75,7 @@ export const RegistrationStep = () => {
       />
       <Combobox
         required
+        openOnFocus
         id={formIds.country}
         label='Страна'
         labelWidth={labelWidth}