From 4591a315990b2926f91d5cc28c56bb3445ac38b6 Mon Sep 17 00:00:00 2001
From: Camille Moussu <66134347+Eriikah@users.noreply.github.com>
Date: Tue, 3 Mar 2026 10:23:29 +0100
Subject: [PATCH] [#584] open timezone selector dropdown on button click (#593)

---
 src/components/Calendar/TimezoneSelector.tsx     | 11 +++++++++--
 src/components/Timezone/TimezoneAutocomplete.tsx |  9 ++++++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/Calendar/TimezoneSelector.tsx b/src/components/Calendar/TimezoneSelector.tsx
index 5ca4c35..5097e0e 100644
--- a/src/components/Calendar/TimezoneSelector.tsx
+++ b/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"
diff --git a/src/components/Timezone/TimezoneAutocomplete.tsx b/src/components/Timezone/TimezoneAutocomplete.tsx
index d496e8f..fee4852 100644
--- a/src/components/Timezone/TimezoneAutocomplete.tsx
+++ b/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
               ? {