handle non multiple selection (#1377)

resolves #1376

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

frontend/taipy/src/CoreSelector.tsx

@@ -106,7 +106,7 @@ interface CoreSelectorProps {
     leafType: NodeType;
     editComponent?: ComponentType<EditProps>;
     showPins?: boolean;
-    onSelect?: (id: string | string[]) => void;
+    onSelect?: (id: string | string[] | null) => void;
     updateCoreVars: string;
     filter?: string;
     sort?: string;
@@ -294,7 +294,7 @@ const filterTree = (entities: Entities, search: string, leafType: NodeType, coun
 };
 
 const localStoreSet = (val: string, ...ids: string[]) => {
-    const id = ids.filter(i => !!i).join(" ");
+    const id = ids.filter((i) => !!i).join(" ");
     if (!id) {
         return;
     }
@@ -306,7 +306,7 @@ const localStoreSet = (val: string, ...ids: string[]) => {
 };
 
 const localStoreGet = (...ids: string[]) => {
-    const id = ids.filter(i => !!i).join(" ");
+    const id = ids.filter((i) => !!i).join(" ");
     if (!id) {
         return undefined;
     }
@@ -364,23 +364,21 @@ const CoreSelector = (props: CoreSelectorProps) => {
     }, []);
 
     const onNodeSelect = useCallback(
-        (e: SyntheticEvent, nodeId: string, isSelected: boolean) => {
+        (e: SyntheticEvent, nodeId: string | string[] | null) => {
             const { selectable = "false" } = e.currentTarget.parentElement?.dataset || {};
             const isSelectable = selectable === "true";
             if (!isSelectable && multiple) {
                 return;
             }
-            setSelectedItems((old) => {
-                const res = isSelected ? [...old, nodeId] : old.filter((id) => id !== nodeId);
-                const scenariosVar = getUpdateVar(updateVars, lovPropertyName);
-                const val = multiple ? res : isSelectable ? nodeId : "";
+            setSelectedItems(() => {
+                const lovVar = getUpdateVar(updateVars, lovPropertyName);
+                const val = multiple ? nodeId : isSelectable ? nodeId : "";
                 setTimeout(
-                    () =>
-                        dispatch(createSendUpdateAction(updateVarName, val, module, onChange, propagate, scenariosVar)),
+                    () => dispatch(createSendUpdateAction(updateVarName, val, module, onChange, propagate, lovVar)),
                     1
                 );
                 onSelect && isSelectable && onSelect(val);
-                return res;
+                return Array.isArray(nodeId) ? nodeId : nodeId ? [nodeId] : [];
             });
         },
         [updateVarName, updateVars, onChange, onSelect, multiple, propagate, dispatch, module, lovPropertyName]
@@ -665,7 +663,7 @@ const CoreSelector = (props: CoreSelectorProps) => {
             <SimpleTreeView
                 slots={treeSlots}
                 sx={treeViewSx}
-                onItemSelectionToggle={onNodeSelect}
+                onSelectedItemsChange={onNodeSelect}
                 selectedItems={selectedItems}
                 multiSelect={multiple}
                 expandedItems={expandedItems}