Refactor dropdown into 'addon' on Input

app/soapbox/components/ui/input/input.tsx

@@ -20,7 +20,7 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
   className?: string,
   /** Extra class names for the outer <div> element. */
   outerClassName?: string,
-  /** URL to the svg icon. */
+  /** URL to the svg icon. Cannot be used with addon. */
   icon?: string,
   /** Internal input name. */
   name?: string,
@@ -31,9 +31,11 @@ interface IInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'maxL
   /** Change event handler for the input. */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
   /** HTML input type. */
-  type: 'text' | 'number' | 'email' | 'tel' | 'password',
+  type?: 'text' | 'number' | 'email' | 'tel' | 'password',
   /** Whether to display the input in red. */
   hasError?: boolean,
+  /** An element to display as prefix to input. Cannot be used with icon. */
+  addon?: React.ReactElement,
 }
 
 /** Form input element. */
@@ -41,7 +43,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
   (props, ref) => {
     const intl = useIntl();
 
-    const { type = 'text', icon, className, outerClassName, hasError, ...filteredProps } = props;
+    const { type = 'text', icon, className, outerClassName, hasError, addon, ...filteredProps } = props;
 
     const [revealed, setRevealed] = React.useState(false);
 
@@ -52,13 +54,19 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
     }, []);
 
     return (
-      <div className={classNames('mt-1 relative shadow-sm', outerClassName)}>
+      <div className={classNames('mt-1 relative rounded-md shadow-sm', outerClassName)}>
         {icon ? (
           <div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
             <Icon src={icon} className='h-4 w-4 text-gray-400' aria-hidden='true' />
           </div>
         ) : null}
 
+        {addon ? (
+          <div className='absolute inset-y-0 left-0 flex items-center'>
+            {addon}
+          </div>
+        ) : null}
+
         <input
           {...filteredProps}
           type={revealed ? 'text' : type}
@@ -69,6 +77,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
             'pr-7': isPassword,
             'text-red-600 border-red-600': hasError,
             'pl-8': typeof icon !== 'undefined',
+            'pl-16': typeof addon !== 'undefined',
           }, className)}
         />
 

app/soapbox/components/ui/phone-input/country-code-dropdown.tsx

@@ -1,11 +1,7 @@
 import React from 'react';
 
-import { Icon, HStack } from 'soapbox/components/ui';
-import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
 import { COUNTRY_CODES, CountryCode } from 'soapbox/utils/phone';
 
-import type { Menu } from 'soapbox/components/dropdown_menu';
-
 interface ICountryCodeDropdown {
   countryCode: CountryCode,
   onChange(countryCode: CountryCode): void,
@@ -13,27 +9,16 @@ interface ICountryCodeDropdown {
 
 /** Dropdown menu to select a country code. */
 const CountryCodeDropdown: React.FC<ICountryCodeDropdown> = ({ countryCode, onChange }) => {
-
-  const handleMenuItem = (code: CountryCode) => {
-    return () => {
-      onChange(code);
-    };
-  };
-
-  const menu: Menu = COUNTRY_CODES.map(code => ({
-    text: <>+{code}</>,
-    action: handleMenuItem(code),
-  }));
-
   return (
-    <DropdownMenu items={menu}>
-      <button type='button' className='px-4 items-center'>
-        <HStack space={1} alignItems='center'>
-          <div>+{countryCode}</div>
-          <Icon className='w-4 h-4 stroke-primary-600' src={require('@tabler/icons/chevron-down.svg')} />
-        </HStack>
-      </button>
-    </DropdownMenu>
+    <select
+      value={countryCode}
+      className='h-full py-0 pl-3 pr-7 text-base bg-transparent border-transparent focus:outline-none focus:ring-primary-500 dark:text-white sm:text-sm rounded-md'
+      onChange={(event) => onChange(event.target.value as any)}
+    >
+      {COUNTRY_CODES.map((code) => (
+        <option value={code} key={code}>+{code}</option>
+      ))}
+    </select>
   );
 };
 

app/soapbox/components/ui/phone-input/phone-input.tsx

@@ -3,7 +3,6 @@ import React, { useState, useEffect } from 'react';
 
 import { CountryCode } from 'soapbox/utils/phone';
 
-import HStack from '../hstack/hstack';
 import Input from '../input/input';
 
 import CountryCodeDropdown from './country-code-dropdown';
@@ -61,23 +60,17 @@ const PhoneInput: React.FC<IPhoneInput> = (props) => {
   }, [countryCode, nationalNumber]);
 
   return (
-    <HStack className='mt-1 shadow-sm'>
-      <div className='dark:bg-slate-800 border border-solid border-r-0 border-gray-300 dark:border-gray-600 flex items-center rounded-l-md'>
+    <Input
+      onChange={handleChange}
+      value={nationalNumber}
+      addon={
         <CountryCodeDropdown
           countryCode={countryCode}
           onChange={setCountryCode}
         />
-      </div>
-
-      <Input
-        type='text'
-        outerClassName='mt-0 shadow-none'
-        className='rounded-l-none'
-        onChange={handleChange}
-        value={nationalNumber}
-        {...rest}
-      />
-    </HStack>
+      }
+      {...rest}
+    />
   );
 };