fix: sync Select defaultValue and sort EOL vulnerabilities without mutation

Restore useEffect in Select so internal state follows programmatic
defaultValue updates (e.g. download page OS/install method).

Replace in-place sort in EOLModal useEffect with useMemo that returns a
sorted copy so renders always use ordered data without mutating props.

Assisted-by: Cursor Agent

Co-authored-by: Aviv Keller <me@aviv.sh>

Author: cursoragent

apps/site/components/EOL/EOLModal.tsx

@@ -1,6 +1,6 @@
 import { Modal, Title, Content } from '@node-core/ui-components/Common/Modal';
 import { useTranslations } from 'next-intl';
-import { useEffect } from 'react';
+import { useMemo } from 'react';
 
 import KnownSeveritySection from '#site/components/EOL/KnownSeveritySection';
 import UnknownSeveritySection from '#site/components/EOL/UnknownSeveritySection';
@@ -26,35 +26,32 @@ const EOLModal: FC<EOLModalProps> = ({
     ? t('components.eolModal.title', { version, codename })
     : t('components.eolModal.titleWithoutCodename', { version });
 
-  useEffect(
-    () => {
-      vulnerabilities.sort(
+  const sortedVulnerabilities = useMemo(
+    () =>
+      [...vulnerabilities].sort(
         (a, b) =>
           SEVERITY_ORDER.indexOf(a.severity) -
           SEVERITY_ORDER.indexOf(b.severity)
-      );
-    },
-    // Only change when the vulnerabilities change
-    // eslint-disable-next-line @eslint-react/exhaustive-deps
-    [vulnerabilities.length]
+      ),
+    [vulnerabilities]
   );
 
   return (
     <Modal {...props}>
       <Title>{modalHeading}</Title>
       <Content>
-        {vulnerabilities.length > 0 && (
+        {sortedVulnerabilities.length > 0 && (
           <p className="m-1">
             {t('components.eolModal.vulnerabilitiesMessage', {
-              count: vulnerabilities.length,
+              count: sortedVulnerabilities.length,
             })}
           </p>
         )}
 
-        <KnownSeveritySection vulnerabilities={vulnerabilities} />
-        <UnknownSeveritySection vulnerabilities={vulnerabilities} />
+        <KnownSeveritySection vulnerabilities={sortedVulnerabilities} />
+        <UnknownSeveritySection vulnerabilities={sortedVulnerabilities} />
 
-        {!vulnerabilities.length && (
+        {!sortedVulnerabilities.length && (
           <p className="m-1">
             {t('components.eolModal.noVulnerabilitiesMessage')}
           </p>

packages/ui-components/src/Common/Select/index.tsx

@@ -3,7 +3,7 @@
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import classNames from 'classnames';
-import { useId, useMemo, useState } from 'react';
+import { useEffect, useId, useMemo, useState } from 'react';
 
 import Skeleton from '#ui/Common/Skeleton';
 
@@ -64,6 +64,10 @@ const Select = <T extends string>({
   const id = useId();
   const [value, setValue] = useState(defaultValue);
 
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
   const mappedValues = useMemo(() => mapValues(values), [values]) as Array<
     SelectGroup<T>
   >;