fix: drive project settings dropdowns via native change events

After the React 19 / @vscode-elements/elements migration, the vscode-single-select element renders its options in the shadow DOM and only emits a native 'change' event on the host. The onClick handlers on the slotted vscode-option children never fired, so selecting a project never updated activeProjectIndex and the compliance/source/target dropdowns never updated.

As a result, project settings (e.g. 'Store information about method parameters') always read from and wrote to the first project in a multi-root/multi-project workspace.

Switch both ProjectSelector and CompilerConfigurationView to listen for the native 'change' event (reading selectedIndex/value) and sync the rendered selection back from redux state, matching the working JdkRuntime pattern.

Fixes #1650

Author: chagong

src/project-settings/assets/compiler/features/CompilerConfigurationView.tsx

@@ -11,7 +11,7 @@ import "@vscode-elements/elements/dist/vscode-table-row/index.js";
 import "@vscode-elements/elements/dist/vscode-table-cell/index.js";
 
 
-import { Dispatch, useEffect } from "react";
+import { Dispatch, useCallback, useEffect, useRef } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { updateCompilerSettings, updateAvailableComplianceLevels } from "./compilerConfigurationViewSlice";
 import { CompilerRequest } from "../../vscode/utils";
@@ -54,6 +54,10 @@ const CompilerConfigurationView = (): JSX.Element | null => {
       Number(sourceLevel) > currentJdkComplianceLevel ||
       Number(targetLevel) > currentJdkComplianceLevel;
 
+  const complianceRef = useRef<HTMLElement>(null);
+  const sourceRef = useRef<HTMLElement>(null);
+  const targetRef = useRef<HTMLElement>(null);
+
   const onMessage = (event: any) => {
     const message = event.data;
     if (message.command === "compiler.onDidGetAvailableComplianceLevels") {
@@ -73,16 +77,66 @@ const CompilerConfigurationView = (): JSX.Element | null => {
     }
   }, []);
 
-  const jdkLevels = (selectedLevel: string, label: string, onClick: (value: string) => void) => {
+  // The vscode-single-select element renders its options in the shadow DOM and
+  // only emits a native `change` event on the host element, so the click handlers
+  // on the slotted vscode-option children never fire. Listen to `change` instead.
+  const useSelectChange = (ref: React.RefObject<HTMLElement | null>, onChange: (value: string) => void) => {
+    useEffect(() => {
+      const el = ref.current;
+      if (!el) {
+        return;
+      }
+      const handler = (e: Event) => {
+        const value = (e.target as any).value;
+        if (value) {
+          onChange(value);
+        }
+      };
+      el.addEventListener("change", handler);
+      return () => el.removeEventListener("change", handler);
+    }, [ref, onChange]);
+  };
+
+  const onChangeComplianceLevel = useCallback((value: string) => {
+    dispatch(updateCompilerSettings({ activeProjectIndex, complianceLevel: value }));
+  }, [dispatch, activeProjectIndex]);
+  const onChangeSourceLevel = useCallback((value: string) => {
+    dispatch(updateCompilerSettings({ activeProjectIndex, sourceLevel: value }));
+  }, [dispatch, activeProjectIndex]);
+  const onChangeTargetLevel = useCallback((value: string) => {
+    dispatch(updateCompilerSettings({ activeProjectIndex, targetLevel: value }));
+  }, [dispatch, activeProjectIndex]);
+
+  useSelectChange(complianceRef, onChangeComplianceLevel);
+  useSelectChange(sourceRef, onChangeSourceLevel);
+  useSelectChange(targetRef, onChangeTargetLevel);
+
+  // Keep the rendered selection in sync with the redux state.
+  useEffect(() => {
+    if (complianceRef.current && complianceLevel) {
+      (complianceRef.current as any).value = complianceLevel;
+    }
+  }, [complianceLevel, availableComplianceLevels]);
+  useEffect(() => {
+    if (sourceRef.current && sourceLevel) {
+      (sourceRef.current as any).value = sourceLevel;
+    }
+  }, [sourceLevel, availableComplianceLevels]);
+  useEffect(() => {
+    if (targetRef.current && targetLevel) {
+      (targetRef.current as any).value = targetLevel;
+    }
+  }, [targetLevel, availableComplianceLevels]);
+
+  const jdkLevels = (selectedLevel: string, label: string) => {
     return availableComplianceLevels.map((level) => {
 
       return (
         <vscode-option
           className="setting-section-option"
           key={`${label}-${level}`}
           value={level}
-          selected={level === selectedLevel}
-          onClick={() => onClick(level)}
+          selected={level === selectedLevel ? true : undefined}
         >
           <span>{level}</span>
         </vscode-option>
@@ -104,27 +158,6 @@ const CompilerConfigurationView = (): JSX.Element | null => {
     }));
   };
 
-  const onClickComplianceLevel = (value: string) => {
-    dispatch(updateCompilerSettings({
-      activeProjectIndex,
-      complianceLevel: value
-    }));
-  };
-
-  const onClickSourceLevel = (value: string) => {
-    dispatch(updateCompilerSettings({
-      activeProjectIndex,
-      sourceLevel: value
-    }));
-  };
-
-  const onClickTargetLevel = (value: string) => {
-    dispatch(updateCompilerSettings({
-      activeProjectIndex,
-      targetLevel: value
-    }));
-  };
-
   const onClickGenerateDebugInfo = (e: any) => {
     dispatch(updateCompilerSettings({
       activeProjectIndex,
@@ -158,8 +191,8 @@ const CompilerConfigurationView = (): JSX.Element | null => {
                 <span>Bytecode version:</span>
               </vscode-table-cell>
               <vscode-table-cell className="flex-center pl-0 pr-0" >
-                <vscode-single-select value={complianceLevel}>
-                  {jdkLevels(complianceLevel, "compliance", onClickComplianceLevel)}
+                <vscode-single-select ref={complianceRef}>
+                  {jdkLevels(complianceLevel, "compliance")}
                 </vscode-single-select>
               </vscode-table-cell>
             </vscode-table-row>
@@ -168,8 +201,8 @@ const CompilerConfigurationView = (): JSX.Element | null => {
                 <span>Source compatibility:</span>
               </vscode-table-cell>
               <vscode-table-cell className="flex-center pl-0 pr-0" >
-                <vscode-single-select value={sourceLevel}>
-                  {jdkLevels(sourceLevel, "source", onClickSourceLevel)}
+                <vscode-single-select ref={sourceRef}>
+                  {jdkLevels(sourceLevel, "source")}
                 </vscode-single-select>
               </vscode-table-cell>
             </vscode-table-row>
@@ -178,8 +211,8 @@ const CompilerConfigurationView = (): JSX.Element | null => {
                 <span>Target compatibility:</span>
               </vscode-table-cell>
               <vscode-table-cell className="flex-center pl-0 pr-0" >
-                <vscode-single-select value={targetLevel}>
-                  {jdkLevels(targetLevel, "target", onClickTargetLevel)}
+                <vscode-single-select ref={targetRef}>
+                  {jdkLevels(targetLevel, "target")}
                 </vscode-single-select>
               </vscode-table-cell>
             </vscode-table-row>

src/project-settings/assets/mainpage/features/component/ProjectSelector.tsx

@@ -4,7 +4,7 @@
 import "@vscode-elements/elements/dist/vscode-single-select/index.js";
 import "@vscode-elements/elements/dist/vscode-option/index.js";
 
-import { useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { ProjectInfo } from "../../../../types";
 import { Dispatch } from "@reduxjs/toolkit";
@@ -17,10 +17,37 @@ const ProjectSelector = (): JSX.Element | null => {
   const projects: ProjectInfo[] = useSelector((state: any) => state.commonConfig.data.projects);
 
   const dispatch: Dispatch<any> = useDispatch();
+  const selectRef = useRef<HTMLElement>(null);
 
-  const handleActiveProjectChange = (index: number) => {
+  const handleActiveProjectChange = useCallback((index: number) => {
     dispatch(activeProjectChange(index));
-  };
+  }, [dispatch]);
+
+  // The vscode-single-select element renders its options in the shadow DOM and
+  // only emits a native `change` event on the host element, so the click handlers
+  // on the slotted vscode-option children never fire. Listen to `change` instead.
+  useEffect(() => {
+    const el = selectRef.current;
+    if (!el) {
+      return;
+    }
+    const onChange = (e: Event) => {
+      const index = (e.target as any).selectedIndex;
+      if (typeof index === "number" && index >= 0) {
+        handleActiveProjectChange(index);
+      }
+    };
+    el.addEventListener("change", onChange);
+    return () => el.removeEventListener("change", onChange);
+  }, [handleActiveProjectChange]);
+
+  // Keep the rendered selection in sync with the active project index.
+  useEffect(() => {
+    const el = selectRef.current;
+    if (el && projects.length > 0) {
+      (el as any).selectedIndex = activeProjectIndex;
+    }
+  }, [activeProjectIndex, projects]);
 
   useEffect(() => {
     if (projects.length === 0) {
@@ -38,7 +65,12 @@ const ProjectSelector = (): JSX.Element | null => {
     }
 
     return (
-      <vscode-option className="setting-section-option" key={project.rootPath} onClick={() => handleActiveProjectChange(index)}>
+      <vscode-option
+        className="setting-section-option"
+        key={project.rootPath}
+        value={project.rootPath}
+        selected={index === activeProjectIndex ? true : undefined}
+      >
         {project.name}
       </vscode-option>
     );
@@ -48,7 +80,7 @@ const ProjectSelector = (): JSX.Element | null => {
     <div id="project-selector" className="setting-section">
       <div className="flex-center mt-2 mb-2">
         <span className="setting-section-description ml-1 mr-1">Project:</span>
-        <vscode-single-select className="setting-section-dropdown">
+        <vscode-single-select ref={selectRef} className="setting-section-dropdown">
             {projectSelections}
         </vscode-single-select>
       </div>