Merge pull request #168 from fictoan/listbox-improvements

Listbox improvements
fictoan · Jan 12, 2025 · 950f1fa · 950f1fa
2 parents 35e4213 + c50be2e
commit 950f1fa
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "fictoan-react",
-    "version": "1.11.9-alpha.10",
+    "version": "1.11.9-alpha.12",
     "private": false,
     "description": "A full-featured, designer-friendly, yet performant framework with plain-English props and focus on rapid iteration.",
     "repository": {

diff --git a/src/components/Form/ListBox/ListBox.tsx b/src/components/Form/ListBox/ListBox.tsx
@@ -133,18 +133,33 @@ const ListBoxWithOptions = (
     // REMOVE AN OPTION ================================================================================================
     const handleDeleteOption = (valueToRemove: string) => {
         if (allowMultiSelect) {
-            onChange?.(selectedOptions
-                .filter(opt => opt.value !== valueToRemove)
-                .map(opt => opt.value));
+            // Filter out the option to remove
+            const newSelectedOptions = selectedOptions.filter(opt => opt.value !== valueToRemove);
+
+            // Update local state
+            setSelectedOptions(newSelectedOptions);
+
+            // Notify parent
+            onChange?.(newSelectedOptions.map(opt => opt.value));
+        } else {
+            // For single-select mode, just clear everything
+            setSelectedOption(null);
+            setSelectedOptions([]);
+            onChange?.("");
         }
     };
 
     // REMOVE ALL OPTIONS ==============================================================================================
-    const handleClearAll = (e: React.MouseEvent<HTMLElement>) => {
-        e.stopPropagation();
+    const handleClearAll = () => {
+        // Reset local state for both single and multi-select
+        setSelectedOption(null);
+        setSelectedOptions([]);
+
+        // Notify parent with empty data
         onChange?.(allowMultiSelect ? [] : "");
     };
 
+
     // ARROW KEYS ======================================================================================================
     const handleKeyDown = (event: KeyboardEvent) => {
         switch (event.key) {
@@ -285,7 +300,7 @@ const ListBoxWithOptions = (
                             <Div
                                 className="icon-wrapper clear-all"
                                 title="Clear all options"
-                                onClick={handleClearAll}
+                                onClick={() => handleClearAll()}
                             >
                                 <svg viewBox="0 0 24 24">
                                     <line x1="5" y1="5" x2="19" y2="19" />