[#584] open timezone selector dropdown on button click (#593)

src/components/Timezone/TimezoneAutocomplete.tsx

@@ -14,7 +14,7 @@ interface TimezoneAutocompleteProps {
   zones: string[];
   getTimezoneOffset: (tzName: string) => string;
   showIcon?: boolean;
-  autoFocus?: boolean;
+  inputRef?: React.Ref<HTMLInputElement>;
   width?: number | string;
   size?: "small" | "medium";
   placeholder?: string;
@@ -23,6 +23,7 @@ interface TimezoneAutocompleteProps {
   onClose?: () => void;
   disableClearable?: boolean;
   hideBorder?: boolean;
+  openOnFocus?: boolean;
 }
 
 export function TimezoneAutocomplete({
@@ -31,7 +32,7 @@ export function TimezoneAutocomplete({
   zones,
   getTimezoneOffset,
   showIcon = false,
-  autoFocus = false,
+  inputRef,
   width,
   size = "small",
   placeholder = "Select timezone",
@@ -40,6 +41,7 @@ export function TimezoneAutocomplete({
   onClose,
   disableClearable = false,
   hideBorder = false,
+  openOnFocus = false,
 }: TimezoneAutocompleteProps) {
   const options = useMemo<TimezoneOption[]>(() => {
     return zones.map((tz) => ({
@@ -53,7 +55,7 @@ export function TimezoneAutocomplete({
 
   return (
     <Autocomplete
-      autoFocus={autoFocus}
+      openOnFocus={openOnFocus}
       value={selectedOption}
       onChange={(event, newValue) => {
         if (newValue) {
@@ -72,6 +74,7 @@ export function TimezoneAutocomplete({
           placeholder={placeholder}
           variant="outlined"
           autoComplete="off"
+          inputRef={inputRef}
           sx={
             hideBorder
               ? {