feat(#526): add onchange to search country card

src/features/AddCardForm/components/Form/hooks/index.tsx

@@ -104,6 +104,8 @@ export const useFormSubmit = ({
   const [inputStates, setInputStates] = useObjectState(initialState)
   const [errorMessage, setErrorMessage] = useState('')
   const [loader, setLoader] = useState(false)
+  const [typedCountry, setTypedCountry] = useState<string>('')
+
   const dataHighlights = useRecoilValue(dataForPayHighlights)
 
   const {
@@ -161,7 +163,7 @@ export const useFormSubmit = ({
     }
   }
 
-  const onCountryChange = useCallback((country: SelectedCountry) => {
+  const onCountrySelect = useCallback((country: SelectedCountry) => {
     resetErrors()
     if (country?.id === selectedCountry?.id) return
     setSelectedCountry(country)
@@ -178,6 +180,10 @@ export const useFormSubmit = ({
     setSelectedState,
   ])
 
+  const onChangeCountry = (e: ChangeEvent<HTMLInputElement>) => {
+    setTypedCountry(e.target.value)
+  }
+
   const onStateSelect = useCallback((state: SelectedState) => {
     resetErrors()
     if (state?.id === selectedState?.id) return
@@ -334,8 +340,9 @@ export const useFormSubmit = ({
     loader,
     name,
     onAddressChange,
+    onChangeCountry,
     onCityChange,
-    onCountryChange,
+    onCountrySelect,
     onInputsBlur,
     onInputsChange,
     onInputsFocus,
@@ -344,6 +351,7 @@ export const useFormSubmit = ({
     onStateSelect,
     selectedCountry,
     selectedState,
+    typedCountry,
     usaStateValue,
     usaStates,
   }

src/features/AddCardForm/components/Form/hooks/useCountries.tsx

@@ -19,6 +19,8 @@ export type SelectedState = (UsaStateType & {
   name: string,
 }) | null
 
+export const USA_ID = 194
+
 const useCountriesList = () => {
   const [countries, setCountries] = useState<Countries>([])
 
@@ -47,7 +49,7 @@ export const useCountries = () => {
   )
 
   useEffect(() => {
-    if (selectedCountry?.id === 194) {
+    if (selectedCountry?.id === USA_ID) {
       (async () => {
         const states = await getUsaStates()
         setUsaStates(states)

src/features/AddCardForm/components/Form/index.tsx

@@ -1,8 +1,8 @@
 import { useRouteMatch } from 'react-router-dom'
 import {
-  CardNumberElement,
-  CardExpiryElement,
   CardCvcElement,
+  CardExpiryElement,
+  CardNumberElement,
 } from '@stripe/react-stripe-js'
 
 import { isMobileDevice } from 'config/userAgent'
@@ -16,7 +16,8 @@ import { SolidButton } from 'features/UserAccount/styled'
 import { ElementContainer } from '../ElementContainer'
 
 import type { Props } from './hooks'
-import { useFormSubmit, ElementTypes } from './hooks'
+import { ElementTypes, useFormSubmit } from './hooks'
+import { USA_ID } from './hooks/useCountries'
 
 import {
   Form,
@@ -81,8 +82,9 @@ export const AddCardFormInner = (props: Props) => {
     loader,
     name,
     onAddressChange,
+    onChangeCountry,
     onCityChange,
-    onCountryChange,
+    onCountrySelect,
     onInputsBlur,
     onInputsChange,
     onInputsFocus,
@@ -91,11 +93,12 @@ export const AddCardFormInner = (props: Props) => {
     onStateSelect,
     selectedCountry,
     selectedState,
+    typedCountry,
     usaStates,
     usaStateValue,
   } = useFormSubmit(props)
 
-  const isUsaCountry = selectedCountry?.id === 194
+  const isUsaCountry = selectedCountry?.id === USA_ID
 
   return (
     <Form onSubmit={handleSubmit}>
@@ -166,14 +169,20 @@ export const AddCardFormInner = (props: Props) => {
       <Column>
         <CountryWrapper>
           <CustomCombobox
-            value={selectedCountry?.name || ''}
-            labelLexic={selectedCountry?.name ? '' : 'country'}
-            onSelect={onCountryChange}
+            value={selectedCountry?.name || typedCountry}
+            labelLexic={
+              (selectedCountry?.name || typedCountry)
+              || !isLabelVisible(ElementTypes.CardCountry)
+                ? ''
+                : 'country'
+            }
+            onSelect={onCountrySelect}
             onBlur={onInputsBlur(ElementTypes.CardCountry)}
             options={countries}
             withError={false}
             selected={Boolean(selectedCountry?.name)}
-            noSearch
+            onChange={onChangeCountry}
+            onFocus={onInputsFocus(ElementTypes.CardCountry)}
           />
         </CountryWrapper>
         {isUsaCountry && (

src/features/AddCardForm/styled.tsx

@@ -133,5 +133,11 @@ export const CustomCombobox = styled(Combobox)`
   ${PopOver}{
     top: 55px;
     max-height: 300px;
+
+    ${isMobileDevice
+    ? css`
+      top: 30px;
+    `
+    : ''};
   }
 ` as typeof Combobox

src/features/Combobox/hooks/index.tsx

@@ -32,6 +32,7 @@ export const useCombobox = <T extends Option>({
   noSearch,
   onBlur,
   onChange,
+  onFocus,
   onSelect,
   options,
   selected,
@@ -104,6 +105,11 @@ export const useCombobox = <T extends Option>({
     onBlur?.(event)
   }
 
+  const onInputFocus = (event: FocusEvent<HTMLInputElement>) => {
+    open()
+    onFocus?.(event)
+  }
+
   useEffect(() => {
     const selectedIndex = findIndex(filteredOptions, ({ name }) => name === query)
     setIndex(selectedIndex)
@@ -138,6 +144,7 @@ export const useCombobox = <T extends Option>({
     inputFieldRef,
     isOpen,
     onInputBlur,
+    onInputFocus,
     onKeyDown,
     onOptionSelect,
     onOutsideClick,

src/features/Combobox/index.tsx

@@ -61,6 +61,7 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
     inputFieldRef,
     isOpen,
     onInputBlur,
+    onInputFocus,
     onKeyDown,
     onOptionSelect,
     onOutsideClick,
@@ -102,7 +103,7 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
           <InputStyled
             maxLength={maxLength}
             onBlur={onInputBlur}
-            onFocus={open}
+            onFocus={onInputFocus || open}
             ref={inputFieldRef}
             autoComplete='off'
             title={title}

src/features/Combobox/styled.tsx

@@ -36,7 +36,6 @@ export const ListOption = styled.li.attrs(() => ({
   padding-left: 24px;
   color: ${({ theme }) => theme.colors.white70};
   background-color: transparent;
-  text-transform: capitalize;
 
   ${({ isHighlighted }) => isHighlighted && css`
     color: ${({ theme }) => theme.colors.white};
@@ -74,10 +73,6 @@ export const WrapperIcon = styled.span`
     : ''};
 `
 
-export const ScAudioWrap = styled.div`
-  margin-left: 20px;
-`
-
 export const ScLoaderWrapper = styled.div`
   border-radius: 10px;
   display: flex;

src/features/Combobox/types.tsx

@@ -18,6 +18,7 @@ export type Props<T> = Pick<InputHTMLAttributes<HTMLInputElement>, (
   | 'title'
   | 'placeholder'
   | 'onBlur'
+  | 'onFocus'
 )> & {
   className?: string,
   customListStyles?: CustomStyles,

src/features/Common/Input/styled.tsx

@@ -129,7 +129,6 @@ const inputStyles = css<InputProps>`
 export const InputStyled = styled.input<InputProps>`
   ${inputStyles}
   opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
-  text-transform: capitalize;
   
   ::placeholder {
     opacity: 0;