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

#806 resolve double tab to select timezone-issue

package-lock.json

@@ -41,6 +41,7 @@
         "react-dom": "^18.2.0",
         "react-redux": "^9.2.0",
         "react-router-dom": "^6.23.1",
+        "react-virtuoso": "^4.18.5",
         "redux-first-history": "^5.2.0",
         "twake-i18n": "^0.3.0",
         "web-vitals": "^2.1.4"
@@ -12616,6 +12617,16 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-virtuoso": {
+      "version": "4.18.5",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.18.5.tgz",
+      "integrity": "sha512-QDyNjyNEuurZG67SOmzYyxEkQYSyGmAMixOI6M15L/Q4CF39EgG+88y6DgZRo0q7rmy0HPx3Fj90I8/tPdnRCQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16 || >=17 || >= 18 || >= 19",
+        "react-dom": ">=16 || >=17 || >= 18 || >=19"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -36,6 +36,7 @@
     "react-dom": "^18.2.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^6.23.1",
+    "react-virtuoso": "^4.18.5",
     "redux-first-history": "^5.2.0",
     "twake-i18n": "^0.3.0",
     "web-vitals": "^2.1.4"

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 }}>
+      <Box sx={{ flex: 1, minHeight: 0 }}>
-        {filteredTimeZones.map(tz => (
+        <Virtuoso
-          <TimezoneListItem
+          data={filteredTimeZones}
-            key={tz}
+          initialTopMostItemIndex={Math.max(
-            tz={tz}
+            0,
-            referenceDate={referenceDate}
+            filteredTimeZones.findIndex(tz => tz === effectiveTimezone)
-            isSelected={effectiveTimezone === tz}
+          )}
-            onSelect={handleSelect}
+          components={{
-            selectedRef={selectedRef}
+            List: VirtuosoList
-          />
+          }}
-        ))}
+          itemContent={(_index, tz) => (
-      </List>
+            <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,
+  onSelect
-  selectedRef
 }) => {
   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 }}
       >