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,7 +29,8 @@ export function DisappearingTimerSelect(props: Props): JSX.Element {
   let expirationTimerOptions: ReadonlyArray<{
     readonly value: DurationInSeconds;
     readonly text: string;
-  }> = expirationTimer.DEFAULT_DURATIONS_IN_SECONDS.map(seconds => {
+  }> = useMemo(() => {
+    return expirationTimer.DEFAULT_DURATIONS_IN_SECONDS.map(seconds => {
       const text = expirationTimer.format(i18n, seconds, {
         capitalizeOff: true,
       });
@@ -38,18 +39,26 @@ export function DisappearingTimerSelect(props: Props): JSX.Element {
         text,
       };
     });
+  }, [i18n]);
 
   const isCustomTimeSelected =
     !expirationTimer.DEFAULT_DURATIONS_SET.has(value);
 
-  const onSelectChange = (newValue: string) => {
+  const onSelectChange = useCallback(
+    (newValue: string) => {
       const intValue = DurationInSeconds.fromSeconds(parseInt(newValue, 10));
       if (intValue === -1) {
-      setIsModalOpen(true);
+        // On Windows we get "change" event followed by "click" (even if
+        // 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(
+    (event: ChangeEvent<HTMLSelectElement>) => {
       onChange(event.target.value);
-  };
+    },
+    [onChange]
+  );
 
   return (
     <div className={classNames(['module-select', moduleClassName])}>