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

src/components/Calendar/TimezoneSelector.tsx

@@ -5,7 +5,7 @@ import {
 } from "@/utils/timezone";
 import { TIMEZONES } from "@/utils/timezone-data";
 import { Button, Popover } from "@linagora/twake-mui";
-import { MouseEvent, useMemo, useState } from "react";
+import { MouseEvent, useMemo, useRef, useState } from "react";
 import { useI18n } from "twake-i18n";
 import { TimezoneAutocomplete } from "../Timezone/TimezoneAutocomplete";
 
@@ -21,6 +21,7 @@ export function TimezoneSelector({
   referenceDate,
 }: TimezoneSelectProps) {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const timezoneList = useTimeZoneList();
 
@@ -72,6 +73,11 @@ export function TimezoneSelector({
           paper: {
             sx: { width: 280, maxHeight: 400, overflow: "hidden", p: 0 },
           },
+          transition: {
+            onEntered: () => {
+              inputRef.current?.focus();
+            },
+          },
         }}
       >
         <TimezoneAutocomplete
@@ -82,7 +88,8 @@ export function TimezoneSelector({
           getTimezoneOffset={(tzName: string) =>
             getTimezoneOffset(tzName, referenceDate)
           }
-          autoFocus={true}
+          inputRef={inputRef}
+          openOnFocus
           showIcon={false}
           inputFontSize="14px"
           inputPadding="2px 4px"

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
               ? {