Merge pull request #807 from lethemanh/806-resolve-double-tab-to-select-timezone-issue

#806 resolve double tab to select timezone-issue

src/components/Timezone/SmallTimeZoneSelector.tsx

@@ -9,6 +9,7 @@ import {
 } from '@linagora/twake-mui'
 import { Search as SearchIcon } from '@mui/icons-material'
 import React, { useState, useMemo, useEffect, useRef } from 'react'
+import { Virtuoso } from 'react-virtuoso'
 import { useTimeZoneList } from './hooks/useTimeZoneList'
 import { TimezoneSelectProps } from './TimezoneSelector'
 import { useI18n } from 'twake-i18n'
@@ -31,6 +32,14 @@ const filterTimezones = (
   })
 }
 
+const VirtuosoList = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>((props, ref) => (
+  <List component="div" {...props} ref={ref} sx={{ pt: 0, pb: 0 }} />
+))
+VirtuosoList.displayName = 'VirtuosoList'
+
 export const SmallTimezoneSelector: React.FC<
   TimezoneSelectProps & {
     onClose: () => void
@@ -57,7 +66,6 @@ export const SmallTimezoneSelector: React.FC<
     onClose()
   }
 
-  const selectedRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   const paperRef = useRef<HTMLDivElement>(null)
 
@@ -96,7 +104,6 @@ export const SmallTimezoneSelector: React.FC<
     }
 
     inputRef.current?.focus()
-    selectedRef.current?.scrollIntoView({ behavior: 'auto', block: 'start' })
 
     return (): void => {
       if (viewport) {
@@ -158,18 +165,27 @@ export const SmallTimezoneSelector: React.FC<
           }}
         />
       </Box>
-      <List sx={{ overflow: 'auto', flex: 1, pt: 0 }}>
-        {filteredTimeZones.map(tz => (
-          <TimezoneListItem
-            key={tz}
-            tz={tz}
-            referenceDate={referenceDate}
-            isSelected={effectiveTimezone === tz}
-            onSelect={handleSelect}
-            selectedRef={selectedRef}
-          />
-        ))}
-      </List>
+      <Box sx={{ flex: 1, minHeight: 0 }}>
+        <Virtuoso
+          data={filteredTimeZones}
+          initialTopMostItemIndex={Math.max(
+            0,
+            filteredTimeZones.findIndex(tz => tz === effectiveTimezone)
+          )}
+          components={{
+            List: VirtuosoList
+          }}
+          itemContent={(_index, tz) => (
+            <TimezoneListItem
+              key={tz}
+              tz={tz}
+              referenceDate={referenceDate}
+              isSelected={effectiveTimezone === tz}
+              onSelect={handleSelect}
+            />
+          )}
+        />
+      </Box>
     </StyledSwipeableDrawer>
   )
 }

src/components/Timezone/TimezoneAutocomplete.tsx

@@ -42,7 +42,7 @@ export function TimezoneAutocomplete({
   disableClearable = false,
   hideBorder = false,
   openOnFocus = false
-}: TimezoneAutocompleteProps) {
+}: TimezoneAutocompleteProps): React.ReactElement {
   const options = useMemo<TimezoneOption[]>(() => {
     return zones.map(tz => ({
       value: tz,

src/components/Timezone/TimezoneListItem.tsx

@@ -15,15 +15,13 @@ interface TimezoneListItemProps {
   referenceDate: Date
   isSelected: boolean
   onSelect: (tz: string) => void
-  selectedRef: React.RefObject<HTMLDivElement> | null
 }
 
 export const TimezoneListItem: React.FC<TimezoneListItemProps> = ({
   tz,
   referenceDate,
   isSelected,
-  onSelect,
-  selectedRef
+  onSelect
 }) => {
   const theme = useTheme()
   const offset = getTimezoneOffset(tz, referenceDate)
@@ -34,7 +32,6 @@ export const TimezoneListItem: React.FC<TimezoneListItemProps> = ({
       <ListItemButton
         selected={isSelected}
         aria-selected={isSelected}
-        ref={isSelected ? selectedRef : null}
         onClick={() => onSelect(tz)}
         sx={{ py: 1 }}
       >