Fix DisappearingTimerSelect on Windows

ts/components/DisappearingTimerSelect.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { ReactNode } from 'react';
-import React, { useState } from 'react';
+import React, { useCallback, useState, useMemo } from 'react';
 import classNames from 'classnames';
 
 import type { LocalizerType } from '../types/Util';
@@ -29,27 +29,36 @@ export function DisappearingTimerSelect(props: Props): JSX.Element {
   let expirationTimerOptions: ReadonlyArray<{
     readonly value: DurationInSeconds;
     readonly text: string;
-  }> = expirationTimer.DEFAULT_DURATIONS_IN_SECONDS.map(seconds => {
+  }> = useMemo(() => {
-    const text = expirationTimer.format(i18n, seconds, {
+    return expirationTimer.DEFAULT_DURATIONS_IN_SECONDS.map(seconds => {
-      capitalizeOff: true,
+      const text = expirationTimer.format(i18n, seconds, {
+        capitalizeOff: true,
+      });
+      return {
+        value: seconds,
+        text,
+      };
     });
-    return {
+  }, [i18n]);
-      value: seconds,
-      text,
-    };
-  });
 
   const isCustomTimeSelected =
     !expirationTimer.DEFAULT_DURATIONS_SET.has(value);
 
-  const onSelectChange = (newValue: string) => {
+  const onSelectChange = useCallback(
-    const intValue = DurationInSeconds.fromSeconds(parseInt(newValue, 10));
+    (newValue: string) => {
-    if (intValue === -1) {
+      const intValue = DurationInSeconds.fromSeconds(parseInt(newValue, 10));
-      setIsModalOpen(true);
+      if (intValue === -1) {
-    } else {
+        // On Windows we get "change" event followed by "click" (even if
-      onChange(intValue);
+        // the <option/> was selected with keyboard. This click unfortunately
-    }
+        // closes the modal so we need to delay opening it until after the
-  };
+        // "click" event.
+        setTimeout(() => setIsModalOpen(true), 0);
+      } else {
+        onChange(intValue);
+      }
+    },
+    [onChange]
+  );
 
   // Custom time...
   expirationTimerOptions = [

ts/components/Select.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import type { ChangeEvent } from 'react';
-import React from 'react';
+import React, { useCallback } from 'react';
 import classNames from 'classnames';
 
 export type Option = Readonly<{
@@ -35,9 +35,12 @@ export const Select = React.forwardRef(function SelectInner(
   }: PropsType,
   ref: React.Ref<HTMLSelectElement>
 ): JSX.Element {
-  const onSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
+  const onSelectChange = useCallback(
-    onChange(event.target.value);
+    (event: ChangeEvent<HTMLSelectElement>) => {
-  };
+      onChange(event.target.value);
+    },
+    [onChange]
+  );
 
   return (
     <div className={classNames(['module-select', moduleClassName])}>