From a82779ed16a628f8813c0d0be77769d967bfa9f7 Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Thu, 13 Nov 2025 12:47:30 -0500
Subject: [PATCH 01/24] update

---
 src/wwElement_Trigger.vue | 14 ++++++++++-
 ww-config.js              | 51 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/src/wwElement_Trigger.vue b/src/wwElement_Trigger.vue
index 53e0dae..b328638 100644
--- a/src/wwElement_Trigger.vue
+++ b/src/wwElement_Trigger.vue
@@ -17,7 +17,8 @@
         </div>
         <!-- MULTI SELECT -->
         <div v-else :style="triggerStyle">
-            <div v-if="isOptionSelected" class="ww-input-select__chip_container">
+            <!-- Display Chips Mode -->
+            <div v-if="isOptionSelected && content.displayMode === 'chips'" class="ww-input-select__chip_container">
                 <div
                     class="ww-input-select__chip"
                     v-for="option in selectedChips"
@@ -36,6 +37,10 @@
                     <div v-html="chipIconUnselect" :style="chipIconStyle" aria-hidden="true"></div>
                 </div>
             </div>
+            <!-- Display Count Mode -->
+            <div v-else-if="isOptionSelected && content.displayMode === 'count'" class="ww-input-select__selected">
+                <span :style="selectedValueStyle">{{ displayCountText }}</span>
+            </div>
             <span v-else :style="placeholderStyle">{{ data.placeholder }}</span>
             <div v-html="chipIcon" :style="triggerIconStyle" aria-hidden="true"></div>
         </div>
@@ -325,6 +330,12 @@ export default {
             emit('remove-multiselect-value', value);
         };
 
+        const displayCountText = computed(() => {
+            const count = selectedDetails.value?.length || 0;
+            const template = wwLib.wwLang.getText(props.content.displayText) || 'Selected: {count}';
+            return template.replace('{count}', count.toString());
+        });
+
         return {
             isSingleSelect,
             data,
@@ -349,6 +360,7 @@ export default {
             chipIconFromOption,
             isOpen,
             handleChipClick,
+            displayCountText,
         };
     },
 };
diff --git a/ww-config.js b/ww-config.js
index 1312456..06020ce 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -194,6 +194,8 @@ export default {
                     'searchPlaceholder',
                     'initialState',
                     'selectType',
+                    'displayMode',
+                    'displayText',
                     'selectTypeWarning',
                 ],
             },
@@ -521,6 +523,55 @@ export default {
             },
             /* wwEditor:end */
         },
+        displayMode: {
+            label: 'Display mode',
+            type: 'TextSelect',
+            options: {
+                options: [
+                    {
+                        value: 'chips',
+                        label: 'Display chips',
+                    },
+                    {
+                        value: 'count',
+                        label: 'Display count',
+                    },
+                ],
+            },
+            bindable: true,
+            defaultValue: 'chips',
+            section: 'settings',
+            /* wwEditor:start */
+            bindingValidation: {
+                type: 'string',
+                tooltip: 'A string value, either "chips" or "count"',
+            },
+            propertyHelp: {
+                tooltip: 'Choose how to display selected items in multi-select mode.\nPossible values: chips, count',
+            },
+            /* wwEditor:end */
+            hidden: content => content.selectType !== 'multiple',
+        },
+        displayText: {
+            label: 'Display text',
+            type: 'Text',
+            defaultValue: { en: 'Selected: {count}' },
+            section: 'settings',
+            states: true,
+            bindable: true,
+            responsive: true,
+            multiLang: true,
+            /* wwEditor:start */
+            bindingValidation: {
+                type: 'string',
+                tooltip: 'A string value with {count} placeholder: "Selected: {count}"',
+            },
+            propertyHelp: {
+                tooltip: 'The text to display when using count mode. Use {count} as a placeholder for the number of selected items.',
+            },
+            /* wwEditor:end */
+            hidden: content => content.selectType !== 'multiple' || content.displayMode !== 'count',
+        },
         disabled: {
             label: { en: 'Disabled' },
             type: 'OnOff',

From 7231ecfe0d13d4afa6c20574b45c6f65a3a1a364 Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Thu, 13 Nov 2025 13:46:52 -0500
Subject: [PATCH 02/24] commit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary
I've successfully implemented the "Sort Selected to Top" feature for your WeWeb select component. Here's what was added:

1. Configuration (ww-config.js)
New Property: sortSelectedToTop
Type: Toggle (On/Off)
Default: false (off)
Location: Settings → Options section
Supports binding, states, and responsive settings
2. Component Logic (wwElement_OptionsList.vue)
Injected Dependencies: Added access to selectedValue and mappingValue from the parent component
Enhanced filteredOptions Computed Property:
First applies search filtering (if active)
Then applies sorting logic when sortSelectedToTop is enabled
Compares each option's value against the selected value(s)
Handles both primitive values and objects
Handles both single and multiple selection modes
Uses JSON comparison for complex object values with fallback to direct comparison
How It Works:
When disabled (default): Options display in their original order
When enabled:
Selected items automatically move to the top of the list
Maintains relative order within selected and unselected groups
Works seamlessly with search filtering
Updates dynamically as items are selected/deselected
The feature integrates perfectly with:

Single and multiple select modes
Search functionality
Virtual scrolling (both heavy and dynamic modes)
All option types (text, icon+text, image+text)
Primitive and object-based options
Users can now enable this in the WeWeb editor under Settings → Options → Sort selected to top!
---
 src/wwElement_OptionsList.vue | 62 +++++++++++++++++++++++++++++++++--
 ww-config.js                  | 19 +++++++++++
 2 files changed, 79 insertions(+), 2 deletions(-)

diff --git a/src/wwElement_OptionsList.vue b/src/wwElement_OptionsList.vue
index eaf9041..4038837 100644
--- a/src/wwElement_OptionsList.vue
+++ b/src/wwElement_OptionsList.vue
@@ -99,6 +99,8 @@ export default {
         const searchState = inject('_wwSelect:searchState', ref(null));
         const { updateSearch } = inject('_wwSelect:useSearch', {});
         const registerOptionProperties = inject('_wwSelect:registerOptionProperties', () => {});
+        const selectedValue = inject('_wwSelect:value', ref(null));
+        const mappingValue = inject('_wwSelect:mappingValue', ref(null));
         const virtualScrollMinItemSize = computed(() => props.content.virtualScrollMinItemSize);
         const virtualScrollBuffer = computed(() => props.content.virtualScrollBuffer);
         const heavyMode = computed(() => props.content.heavyMode);
@@ -156,8 +158,64 @@ export default {
         });
 
         const filteredOptions = computed(() => {
-            if (!searchState.value || !searchState.value.value) return options.value;
-            let filtered = memoizedFilter(options.value, searchState.value.value);
+            let filtered = options.value;
+            
+            // Apply search filter if active
+            if (searchState.value && searchState.value.value) {
+                filtered = memoizedFilter(options.value, searchState.value.value);
+            }
+            
+            // Apply sorting if sortSelectedToTop is enabled
+            if (props.content.sortSelectedToTop && selectedValue.value) {
+                filtered = [...filtered].sort((a, b) => {
+                    // Get the value for each option
+                    const aValue = typeof a === 'object' && a !== null 
+                        ? wwLib.resolveObjectPropertyPath(a, mappingValue.value?.code || 'value')
+                        : a;
+                    const bValue = typeof b === 'object' && b !== null 
+                        ? wwLib.resolveObjectPropertyPath(b, mappingValue.value?.code || 'value')
+                        : b;
+                    
+                    // Check if each option is selected
+                    const aIsSelected = Array.isArray(selectedValue.value)
+                        ? selectedValue.value.some(v => {
+                            try {
+                                return JSON.stringify(v) === JSON.stringify(aValue);
+                            } catch {
+                                return v === aValue;
+                            }
+                        })
+                        : (() => {
+                            try {
+                                return JSON.stringify(selectedValue.value) === JSON.stringify(aValue);
+                            } catch {
+                                return selectedValue.value === aValue;
+                            }
+                        })();
+                    
+                    const bIsSelected = Array.isArray(selectedValue.value)
+                        ? selectedValue.value.some(v => {
+                            try {
+                                return JSON.stringify(v) === JSON.stringify(bValue);
+                            } catch {
+                                return v === bValue;
+                            }
+                        })
+                        : (() => {
+                            try {
+                                return JSON.stringify(selectedValue.value) === JSON.stringify(bValue);
+                            } catch {
+                                return selectedValue.value === bValue;
+                            }
+                        })();
+                    
+                    // Sort selected items to top
+                    if (aIsSelected && !bIsSelected) return -1;
+                    if (!aIsSelected && bIsSelected) return 1;
+                    return 0; // Keep original order for items with same selection status
+                });
+            }
+            
             return filtered;
         });
 
diff --git a/ww-config.js b/ww-config.js
index 06020ce..f7e1374 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -212,6 +212,7 @@ export default {
                     'closeOnClickOutside',
                     'manualTrigger',
                     'selectOnClick',
+                    'sortSelectedToTop',
                     'virtualScroll',
                     'virtualScrollBuffer',
                     'virtualScrollMinItemSize',
@@ -1076,6 +1077,24 @@ export default {
             },
             /* wwEditor:end */
         },
+        sortSelectedToTop: {
+            label: { en: 'Sort selected to top' },
+            type: 'OnOff',
+            states: true,
+            bindable: true,
+            responsive: true,
+            defaultValue: false,
+            section: 'settings',
+            /* wwEditor:start */
+            bindingValidation: {
+                type: 'boolean',
+                tooltip: 'Whether selected items should appear at the top of the options list: `true | false`',
+            },
+            propertyHelp: {
+                tooltip: 'When enabled, selected options will be sorted to the top of the list.',
+            },
+            /* wwEditor:end */
+        },
         unselectOnClick: {
             label: { en: 'Unselect on click' },
             type: 'OnOff',

From b7bdf63903ee359f8d36a4914da9b9382098cf89 Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Thu, 13 Nov 2025 13:53:02 -0500
Subject: [PATCH 03/24] Update wwElement_OptionsList.vue

---
 src/wwElement_OptionsList.vue | 68 +++++++++++++++--------------------
 1 file changed, 29 insertions(+), 39 deletions(-)

diff --git a/src/wwElement_OptionsList.vue b/src/wwElement_OptionsList.vue
index 4038837..6046794 100644
--- a/src/wwElement_OptionsList.vue
+++ b/src/wwElement_OptionsList.vue
@@ -52,9 +52,10 @@
 
 <script>
 import InputSelectOption from './wwElement_Option.vue';
-import { ref, inject, computed, watch } from 'vue';
+import { ref, inject, computed, watch, toValue } from 'vue';
 import { DynamicScroller, DynamicScrollerItem, RecycleScroller } from 'vue-virtual-scroller';
 import { useMemoize } from '@vueuse/core';
+import { areValuesEqual } from './utils';
 /* wwEditor:start */
 import useEditorHint from './editor/useEditorHint';
 /* wwEditor:end */
@@ -157,6 +158,20 @@ export default {
             });
         });
 
+        const { resolveMappingFormula } = wwLib.wwFormula.useFormula();
+
+        // Helper function to extract value from an option item
+        const getOptionValue = (option) => {
+            // Handle primitive values (strings, numbers, etc.)
+            const isPrimitive = typeof option !== 'object' || option === null;
+            if (isPrimitive) {
+                return option;
+            }
+            
+            // For objects, use the mapping formula
+            return resolveMappingFormula(toValue(mappingValue.value), option) ?? option;
+        };
+
         const filteredOptions = computed(() => {
             let filtered = options.value;
             
@@ -166,48 +181,23 @@ export default {
             }
             
             // Apply sorting if sortSelectedToTop is enabled
-            if (props.content.sortSelectedToTop && selectedValue.value) {
+            if (props.content.sortSelectedToTop && selectedValue.value != null) {
                 filtered = [...filtered].sort((a, b) => {
-                    // Get the value for each option
-                    const aValue = typeof a === 'object' && a !== null 
-                        ? wwLib.resolveObjectPropertyPath(a, mappingValue.value?.code || 'value')
-                        : a;
-                    const bValue = typeof b === 'object' && b !== null 
-                        ? wwLib.resolveObjectPropertyPath(b, mappingValue.value?.code || 'value')
-                        : b;
+                    const aValue = getOptionValue(a);
+                    const bValue = getOptionValue(b);
                     
                     // Check if each option is selected
-                    const aIsSelected = Array.isArray(selectedValue.value)
-                        ? selectedValue.value.some(v => {
-                            try {
-                                return JSON.stringify(v) === JSON.stringify(aValue);
-                            } catch {
-                                return v === aValue;
-                            }
-                        })
-                        : (() => {
-                            try {
-                                return JSON.stringify(selectedValue.value) === JSON.stringify(aValue);
-                            } catch {
-                                return selectedValue.value === aValue;
-                            }
-                        })();
+                    let aIsSelected, bIsSelected;
                     
-                    const bIsSelected = Array.isArray(selectedValue.value)
-                        ? selectedValue.value.some(v => {
-                            try {
-                                return JSON.stringify(v) === JSON.stringify(bValue);
-                            } catch {
-                                return v === bValue;
-                            }
-                        })
-                        : (() => {
-                            try {
-                                return JSON.stringify(selectedValue.value) === JSON.stringify(bValue);
-                            } catch {
-                                return selectedValue.value === bValue;
-                            }
-                        })();
+                    if (Array.isArray(selectedValue.value)) {
+                        // Multiple selection mode
+                        aIsSelected = selectedValue.value.some(v => areValuesEqual(v, aValue));
+                        bIsSelected = selectedValue.value.some(v => areValuesEqual(v, bValue));
+                    } else {
+                        // Single selection mode
+                        aIsSelected = areValuesEqual(selectedValue.value, aValue);
+                        bIsSelected = areValuesEqual(selectedValue.value, bValue);
+                    }
                     
                     // Sort selected items to top
                     if (aIsSelected && !bIsSelected) return -1;

From f49095bd68d7d6841049e9e7cad0c7ec25be99bd Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Thu, 13 Nov 2025 13:57:40 -0500
Subject: [PATCH 04/24] Update wwElement_OptionsList.vue

---
 src/wwElement_OptionsList.vue | 46 +++++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/wwElement_OptionsList.vue b/src/wwElement_OptionsList.vue
index 6046794..450d5ff 100644
--- a/src/wwElement_OptionsList.vue
+++ b/src/wwElement_OptionsList.vue
@@ -160,18 +160,6 @@ export default {
 
         const { resolveMappingFormula } = wwLib.wwFormula.useFormula();
 
-        // Helper function to extract value from an option item
-        const getOptionValue = (option) => {
-            // Handle primitive values (strings, numbers, etc.)
-            const isPrimitive = typeof option !== 'object' || option === null;
-            if (isPrimitive) {
-                return option;
-            }
-            
-            // For objects, use the mapping formula
-            return resolveMappingFormula(toValue(mappingValue.value), option) ?? option;
-        };
-
         const filteredOptions = computed(() => {
             let filtered = options.value;
             
@@ -182,9 +170,19 @@ export default {
             
             // Apply sorting if sortSelectedToTop is enabled
             if (props.content.sortSelectedToTop && selectedValue.value != null) {
+                // Create a map of option values to avoid recalculating during sort
+                const optionValueMap = new Map();
+                filtered.forEach((option) => {
+                    const isPrimitive = typeof option !== 'object' || option === null;
+                    const value = isPrimitive 
+                        ? option 
+                        : resolveMappingFormula(toValue(mappingValue.value), option) ?? option;
+                    optionValueMap.set(option, value);
+                });
+                
                 filtered = [...filtered].sort((a, b) => {
-                    const aValue = getOptionValue(a);
-                    const bValue = getOptionValue(b);
+                    const aValue = optionValueMap.get(a);
+                    const bValue = optionValueMap.get(b);
                     
                     // Check if each option is selected
                     let aIsSelected, bIsSelected;
@@ -214,11 +212,23 @@ export default {
                 // Handle primitive values properly - don't spread them as they become indexed objects
                 const isPrimitive = typeof item !== 'object' || item === null;
                 if (isPrimitive) {
-                    // For primitives, create a simple object wrapper
-                    return { value: item, id: `id_${index}` };
+                    // For primitives, create a simple object wrapper with stable ID based on value
+                    const stableId = `primitive_${JSON.stringify(item)}`;
+                    return { value: item, id: stableId };
                 } else {
-                    // For objects, use the existing spread logic
-                    return { ...item, id: item.id ?? `id_${index}` };
+                    // For objects, use existing id or create stable ID based on the object's value
+                    const existingId = item.id;
+                    if (existingId != null) {
+                        return { ...item, id: existingId };
+                    }
+                    // Create stable ID based on object content to survive re-sorting
+                    try {
+                        const stableId = `obj_${JSON.stringify(item)}`;
+                        return { ...item, id: stableId };
+                    } catch {
+                        // Fallback to index-based if JSON.stringify fails (circular refs, etc.)
+                        return { ...item, id: `id_${index}` };
+                    }
                 }
             });
         });

From 57f00d66c9c51cbe9e2a26883f17c87bd3bc87cf Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Thu, 13 Nov 2025 13:58:22 -0500
Subject: [PATCH 05/24] Fix comment syntax in ww-config.js

Corrected the closing comment for wwEditor to include a period, ensuring proper syntax and consistency.
---
 ww-config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ww-config.js b/ww-config.js
index f7e1374..3f89a0f 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -1093,7 +1093,7 @@ export default {
             propertyHelp: {
                 tooltip: 'When enabled, selected options will be sorted to the top of the list.',
             },
-            /* wwEditor:end */
+            /* wwEditor:end .*/
         },
         unselectOnClick: {
             label: { en: 'Unselect on click' },

From e706865362968396a955ee31d12d6cc157af81f2 Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Thu, 13 Nov 2025 14:01:45 -0500
Subject: [PATCH 06/24] Add debug logging to OptionsList component

Introduced multiple console.log statements throughout the OptionsList component to aid in debugging selection sorting, option filtering, and dynamic scroller item generation. Also added error handling for the sorting logic to improve traceability of issues during runtime.
---
 src/wwElement_OptionsList.vue | 100 +++++++++++++++++++++++-----------
 1 file changed, 68 insertions(+), 32 deletions(-)

diff --git a/src/wwElement_OptionsList.vue b/src/wwElement_OptionsList.vue
index 450d5ff..c1f4411 100644
--- a/src/wwElement_OptionsList.vue
+++ b/src/wwElement_OptionsList.vue
@@ -107,6 +107,17 @@ export default {
         const heavyMode = computed(() => props.content.heavyMode);
         const itemSize = computed(() => props.content.itemSize);
 
+        console.log('[OptionsList] Component setup, sortSelectedToTop:', props.content.sortSelectedToTop);
+
+        // Watch selectedValue changes
+        watch(selectedValue, (newVal, oldVal) => {
+            console.log('[OptionsList] selectedValue changed:', { 
+                old: oldVal, 
+                new: newVal,
+                sortEnabled: props.content.sortSelectedToTop 
+            });
+        }, { deep: true });
+
         const emptyStateText = computed(() => wwLib.wwLang.getText(props.content.emptyStateText));
 
         const options = computed(() => {
@@ -161,54 +172,76 @@ export default {
         const { resolveMappingFormula } = wwLib.wwFormula.useFormula();
 
         const filteredOptions = computed(() => {
+            console.log('[OptionsList] filteredOptions computing...', {
+                sortEnabled: props.content.sortSelectedToTop,
+                hasSelectedValue: selectedValue.value != null,
+                selectedValue: selectedValue.value,
+                optionsCount: options.value?.length
+            });
+            
             let filtered = options.value;
             
             // Apply search filter if active
             if (searchState.value && searchState.value.value) {
+                console.log('[OptionsList] Applying search filter');
                 filtered = memoizedFilter(options.value, searchState.value.value);
             }
             
             // Apply sorting if sortSelectedToTop is enabled
             if (props.content.sortSelectedToTop && selectedValue.value != null) {
-                // Create a map of option values to avoid recalculating during sort
-                const optionValueMap = new Map();
-                filtered.forEach((option) => {
-                    const isPrimitive = typeof option !== 'object' || option === null;
-                    const value = isPrimitive 
-                        ? option 
-                        : resolveMappingFormula(toValue(mappingValue.value), option) ?? option;
-                    optionValueMap.set(option, value);
-                });
-                
-                filtered = [...filtered].sort((a, b) => {
-                    const aValue = optionValueMap.get(a);
-                    const bValue = optionValueMap.get(b);
-                    
-                    // Check if each option is selected
-                    let aIsSelected, bIsSelected;
-                    
-                    if (Array.isArray(selectedValue.value)) {
-                        // Multiple selection mode
-                        aIsSelected = selectedValue.value.some(v => areValuesEqual(v, aValue));
-                        bIsSelected = selectedValue.value.some(v => areValuesEqual(v, bValue));
-                    } else {
-                        // Single selection mode
-                        aIsSelected = areValuesEqual(selectedValue.value, aValue);
-                        bIsSelected = areValuesEqual(selectedValue.value, bValue);
-                    }
+                console.log('[OptionsList] Starting sort operation');
+                try {
+                    // Create a map of option values to avoid recalculating during sort
+                    const optionValueMap = new Map();
+                    filtered.forEach((option, idx) => {
+                        const isPrimitive = typeof option !== 'object' || option === null;
+                        const value = isPrimitive 
+                            ? option 
+                            : resolveMappingFormula(toValue(mappingValue.value), option) ?? option;
+                        optionValueMap.set(option, value);
+                        if (idx < 3) {
+                            console.log(`[OptionsList] Option ${idx} value:`, value);
+                        }
+                    });
                     
-                    // Sort selected items to top
-                    if (aIsSelected && !bIsSelected) return -1;
-                    if (!aIsSelected && bIsSelected) return 1;
-                    return 0; // Keep original order for items with same selection status
-                });
+                    console.log('[OptionsList] Starting array sort');
+                    filtered = [...filtered].sort((a, b) => {
+                        const aValue = optionValueMap.get(a);
+                        const bValue = optionValueMap.get(b);
+                        
+                        // Check if each option is selected
+                        let aIsSelected, bIsSelected;
+                        
+                        if (Array.isArray(selectedValue.value)) {
+                            // Multiple selection mode
+                            aIsSelected = selectedValue.value.some(v => areValuesEqual(v, aValue));
+                            bIsSelected = selectedValue.value.some(v => areValuesEqual(v, bValue));
+                        } else {
+                            // Single selection mode
+                            aIsSelected = areValuesEqual(selectedValue.value, aValue);
+                            bIsSelected = areValuesEqual(selectedValue.value, bValue);
+                        }
+                        
+                        // Sort selected items to top
+                        if (aIsSelected && !bIsSelected) return -1;
+                        if (!aIsSelected && bIsSelected) return 1;
+                        return 0; // Keep original order for items with same selection status
+                    });
+                    console.log('[OptionsList] Sort complete');
+                } catch (error) {
+                    console.error('[OptionsList] Error during sorting:', error);
+                    // Return unsorted on error
+                    filtered = [...filtered];
+                }
             }
             
+            console.log('[OptionsList] filteredOptions complete, count:', filtered.length);
             return filtered;
         });
 
         const dynamicScrollerItems = computed(() => {
-            return filteredOptions.value.map((item, index) => {
+            console.log('[OptionsList] dynamicScrollerItems computing, count:', filteredOptions.value.length);
+            const items = filteredOptions.value.map((item, index) => {
                 // Handle primitive values properly - don't spread them as they become indexed objects
                 const isPrimitive = typeof item !== 'object' || item === null;
                 if (isPrimitive) {
@@ -231,9 +264,12 @@ export default {
                     }
                 }
             });
+            console.log('[OptionsList] dynamicScrollerItems complete, first 3 IDs:', items.slice(0, 3).map(i => i.id));
+            return items;
         });
 
         watch(filteredOptions, () => {
+            console.log('[OptionsList] filteredOptions watcher triggered');
             if (updateSearch) {
                 const searchMatches = searchState.value && searchState.value.value ? filteredOptions.value : [];
                 updateSearch({ ...searchState.value, searchMatches });

From 5d6464cc77625b75596b134840b0af2c7b9df077 Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Thu, 13 Nov 2025 14:21:11 -0500
Subject: [PATCH 07/24] Refactor search watcher in OptionsList component

Changed the watcher to track search state and filtered count instead of filteredOptions, ensuring updates only occur on search changes and not sorting. This improves accuracy when updating search results.
---
 src/wwElement_OptionsList.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/wwElement_OptionsList.vue b/src/wwElement_OptionsList.vue
index c1f4411..80340d7 100644
--- a/src/wwElement_OptionsList.vue
+++ b/src/wwElement_OptionsList.vue
@@ -268,13 +268,20 @@ export default {
             return items;
         });
 
-        watch(filteredOptions, () => {
-            console.log('[OptionsList] filteredOptions watcher triggered');
-            if (updateSearch) {
-                const searchMatches = searchState.value && searchState.value.value ? filteredOptions.value : [];
+        // Watch for search changes only, not sorting changes
+        // We need to track the actual filtering, not the sorting
+        const searchFilteredCount = computed(() => {
+            if (!searchState.value || !searchState.value.value) return options.value.length;
+            return memoizedFilter(options.value, searchState.value.value).length;
+        });
+
+        watch([searchState, searchFilteredCount], () => {
+            console.log('[OptionsList] searchState watcher triggered');
+            if (updateSearch && searchState.value && searchState.value.value) {
+                const searchMatches = memoizedFilter(options.value, searchState.value.value);
                 updateSearch({ ...searchState.value, searchMatches });
             }
-        });
+        }, { deep: true });
 
         // Styles
         const scrollerStyle = computed(() => {

From 5eaad5ff5b07af66a4a0624a79f81f745d44682c Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Thu, 13 Nov 2025 14:25:45 -0500
Subject: [PATCH 08/24] Remove debug logging from OptionsList, add logs to
 Select

Eliminated multiple console.log statements from wwElement_OptionsList.vue to clean up debug output. Added targeted logging in wwElement_Select.vue for toggleValueAccessibility and closeDropdown functions to aid in debugging specific behaviors.
---
 src/wwElement_OptionsList.vue | 34 ++--------------------------------
 src/wwElement_Select.vue      |  2 ++
 2 files changed, 4 insertions(+), 32 deletions(-)

diff --git a/src/wwElement_OptionsList.vue b/src/wwElement_OptionsList.vue
index 80340d7..c34d753 100644
--- a/src/wwElement_OptionsList.vue
+++ b/src/wwElement_OptionsList.vue
@@ -107,17 +107,6 @@ export default {
         const heavyMode = computed(() => props.content.heavyMode);
         const itemSize = computed(() => props.content.itemSize);
 
-        console.log('[OptionsList] Component setup, sortSelectedToTop:', props.content.sortSelectedToTop);
-
-        // Watch selectedValue changes
-        watch(selectedValue, (newVal, oldVal) => {
-            console.log('[OptionsList] selectedValue changed:', { 
-                old: oldVal, 
-                new: newVal,
-                sortEnabled: props.content.sortSelectedToTop 
-            });
-        }, { deep: true });
-
         const emptyStateText = computed(() => wwLib.wwLang.getText(props.content.emptyStateText));
 
         const options = computed(() => {
@@ -172,39 +161,26 @@ export default {
         const { resolveMappingFormula } = wwLib.wwFormula.useFormula();
 
         const filteredOptions = computed(() => {
-            console.log('[OptionsList] filteredOptions computing...', {
-                sortEnabled: props.content.sortSelectedToTop,
-                hasSelectedValue: selectedValue.value != null,
-                selectedValue: selectedValue.value,
-                optionsCount: options.value?.length
-            });
-            
             let filtered = options.value;
             
             // Apply search filter if active
             if (searchState.value && searchState.value.value) {
-                console.log('[OptionsList] Applying search filter');
                 filtered = memoizedFilter(options.value, searchState.value.value);
             }
             
             // Apply sorting if sortSelectedToTop is enabled
             if (props.content.sortSelectedToTop && selectedValue.value != null) {
-                console.log('[OptionsList] Starting sort operation');
                 try {
                     // Create a map of option values to avoid recalculating during sort
                     const optionValueMap = new Map();
-                    filtered.forEach((option, idx) => {
+                    filtered.forEach((option) => {
                         const isPrimitive = typeof option !== 'object' || option === null;
                         const value = isPrimitive 
                             ? option 
                             : resolveMappingFormula(toValue(mappingValue.value), option) ?? option;
                         optionValueMap.set(option, value);
-                        if (idx < 3) {
-                            console.log(`[OptionsList] Option ${idx} value:`, value);
-                        }
                     });
                     
-                    console.log('[OptionsList] Starting array sort');
                     filtered = [...filtered].sort((a, b) => {
                         const aValue = optionValueMap.get(a);
                         const bValue = optionValueMap.get(b);
@@ -227,7 +203,6 @@ export default {
                         if (!aIsSelected && bIsSelected) return 1;
                         return 0; // Keep original order for items with same selection status
                     });
-                    console.log('[OptionsList] Sort complete');
                 } catch (error) {
                     console.error('[OptionsList] Error during sorting:', error);
                     // Return unsorted on error
@@ -235,13 +210,11 @@ export default {
                 }
             }
             
-            console.log('[OptionsList] filteredOptions complete, count:', filtered.length);
             return filtered;
         });
 
         const dynamicScrollerItems = computed(() => {
-            console.log('[OptionsList] dynamicScrollerItems computing, count:', filteredOptions.value.length);
-            const items = filteredOptions.value.map((item, index) => {
+            return filteredOptions.value.map((item, index) => {
                 // Handle primitive values properly - don't spread them as they become indexed objects
                 const isPrimitive = typeof item !== 'object' || item === null;
                 if (isPrimitive) {
@@ -264,8 +237,6 @@ export default {
                     }
                 }
             });
-            console.log('[OptionsList] dynamicScrollerItems complete, first 3 IDs:', items.slice(0, 3).map(i => i.id));
-            return items;
         });
 
         // Watch for search changes only, not sorting changes
@@ -276,7 +247,6 @@ export default {
         });
 
         watch([searchState, searchFilteredCount], () => {
-            console.log('[OptionsList] searchState watcher triggered');
             if (updateSearch && searchState.value && searchState.value.value) {
                 const searchMatches = memoizedFilter(options.value, searchState.value.value);
                 updateSearch({ ...searchState.value, searchMatches });
diff --git a/src/wwElement_Select.vue b/src/wwElement_Select.vue
index e141832..fef5f92 100644
--- a/src/wwElement_Select.vue
+++ b/src/wwElement_Select.vue
@@ -314,6 +314,7 @@ export default {
         };
 
         const toggleValueAccessibility = value => {
+            console.log('[Select] toggleValueAccessibility called, value:', value, 'closeOnSelect:', props.content.closeOnSelect);
             // Don't process empty values
             if (value === '' || value == null || value === undefined) {
                 return;
@@ -465,6 +466,7 @@ export default {
         }
 
         function closeDropdown() {
+            console.log('[Select] closeDropdown called, shouldClose:', shouldCloseDropdown.value, 'stack:', new Error().stack);
             if (!shouldCloseDropdown.value) return;
 
             resetSearch();

From 57f2e255b2fc9af7ee25f0a2c539a909c1b25938 Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Thu, 13 Nov 2025 14:27:36 -0500
Subject: [PATCH 09/24] Update wwElement_Select.vue

---
 src/wwElement_Select.vue | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/wwElement_Select.vue b/src/wwElement_Select.vue
index fef5f92..b458490 100644
--- a/src/wwElement_Select.vue
+++ b/src/wwElement_Select.vue
@@ -486,14 +486,24 @@ export default {
         }
 
         function handleClickOutside(event) {
-            if (
-                closeOnClickOutside.value &&
+            const shouldClose = closeOnClickOutside.value &&
                 isOpen.value &&
                 !triggerElement.value.contains(event.target) &&
                 !dropdownElement.value.contains(event.target) &&
                 !isEditing.value &&
-                Date.now() > lastTriggeredComponentAction.value + 400
-            ) {
+                Date.now() > lastTriggeredComponentAction.value + 400;
+            
+            console.log('[Select] handleClickOutside:', {
+                shouldClose,
+                closeOnClickOutside: closeOnClickOutside.value,
+                isOpen: isOpen.value,
+                inTrigger: triggerElement.value?.contains(event.target),
+                inDropdown: dropdownElement.value?.contains(event.target),
+                target: event.target,
+                dropdownElement: dropdownElement.value
+            });
+            
+            if (shouldClose) {
                 closeDropdown();
             }
         }

From f0cdb18133bfe840fa5f5aa4416a9a8264e95e2b Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Thu, 13 Nov 2025 14:30:52 -0500
Subject: [PATCH 10/24] Add debug watcher for isOpen state changes

Introduced a watcher on the isOpen state to log transitions and stack traces for debugging purposes in the Select component.
---
 src/wwElement_Select.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/wwElement_Select.vue b/src/wwElement_Select.vue
index b458490..2ef7762 100644
--- a/src/wwElement_Select.vue
+++ b/src/wwElement_Select.vue
@@ -193,6 +193,11 @@ export default {
         const showSearch = computed(() => props.content.showSearch);
         const allowScrollingWhenOpen = computed(() => props.content.allowScrollingWhenOpen);
 
+        // Debug: Watch isOpen changes
+        watch(isOpen, (newVal, oldVal) => {
+            console.log('[Select] isOpen changed:', { from: oldVal, to: newVal, stack: new Error().stack });
+        });
+
         // Styles
         const syncFloating = () => {
             if (!triggerElement?.value) return;

From c18dd92494a1be2afef36ac3f405f0775d797fe1 Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Thu, 13 Nov 2025 14:32:57 -0500
Subject: [PATCH 11/24] Update wwElement_Select.vue

---
 src/wwElement_Select.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/wwElement_Select.vue b/src/wwElement_Select.vue
index 2ef7762..dfaed27 100644
--- a/src/wwElement_Select.vue
+++ b/src/wwElement_Select.vue
@@ -198,6 +198,11 @@ export default {
             console.log('[Select] isOpen changed:', { from: oldVal, to: newVal, stack: new Error().stack });
         });
 
+        // Debug: Watch sortSelectedToTop prop
+        watch(() => props.content.sortSelectedToTop, (newVal, oldVal) => {
+            console.log('[Select] sortSelectedToTop changed:', { from: oldVal, to: newVal });
+        });
+
         // Styles
         const syncFloating = () => {
             if (!triggerElement?.value) return;

From a2bdb6781417fe1f9da6c8d42bcbe776445b220e Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Thu, 13 Nov 2025 14:34:50 -0500
Subject: [PATCH 12/24] Add debug watchers for content and initialState

Added Vue watchers to log changes to props.content reference and initialState for debugging purposes. These logs help track state changes and reference updates in the Select component.
---
 src/wwElement_Select.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/wwElement_Select.vue b/src/wwElement_Select.vue
index dfaed27..9a4c4e6 100644
--- a/src/wwElement_Select.vue
+++ b/src/wwElement_Select.vue
@@ -203,6 +203,19 @@ export default {
             console.log('[Select] sortSelectedToTop changed:', { from: oldVal, to: newVal });
         });
 
+        // Debug: Watch props.content reference
+        watch(() => props.content, (newVal, oldVal) => {
+            console.log('[Select] props.content reference changed:', { 
+                same: newVal === oldVal,
+                initialState: newVal.initialState 
+            });
+        });
+
+        // Debug: Watch initialState
+        watch(initialState, (newVal, oldVal) => {
+            console.log('[Select] initialState changed:', { from: oldVal, to: newVal });
+        });
+
         // Styles
         const syncFloating = () => {
             if (!triggerElement?.value) return;

From 4ff31b8d19b586765ddb80409299f7f386e2b41a Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Thu, 13 Nov 2025 14:39:56 -0500
Subject: [PATCH 13/24] Update wwElement_Select.vue

---
 src/wwElement_Select.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/wwElement_Select.vue b/src/wwElement_Select.vue
index 9a4c4e6..e99cd5d 100644
--- a/src/wwElement_Select.vue
+++ b/src/wwElement_Select.vue
@@ -489,7 +489,9 @@ export default {
         }
 
         function closeDropdown() {
-            console.log('[Select] closeDropdown called, shouldClose:', shouldCloseDropdown.value, 'stack:', new Error().stack);
+            const stack = new Error().stack;
+            const caller = stack.split('\n')[2]?.trim(); // Get the calling line
+            console.log('[Select] closeDropdown called from:', caller, 'shouldClose:', shouldCloseDropdown.value);
             if (!shouldCloseDropdown.value) return;
 
             resetSearch();

From a43816d385b620ac2c8c07c6ca4cfcfa70a3a4f9 Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Thu, 13 Nov 2025 14:45:16 -0500
Subject: [PATCH 14/24] Add isSorting flag to manage dropdown sorting state

Introduces an isSorting reactive flag to coordinate sorting state between Select and OptionsList components. Prevents dropdown from closing during sorting and ensures UI updates are handled smoothly.
---
 src/wwElement_OptionsList.vue | 9 +++++++++
 src/wwElement_Select.vue      | 6 +++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/wwElement_OptionsList.vue b/src/wwElement_OptionsList.vue
index c34d753..52b7faa 100644
--- a/src/wwElement_OptionsList.vue
+++ b/src/wwElement_OptionsList.vue
@@ -102,6 +102,7 @@ export default {
         const registerOptionProperties = inject('_wwSelect:registerOptionProperties', () => {});
         const selectedValue = inject('_wwSelect:value', ref(null));
         const mappingValue = inject('_wwSelect:mappingValue', ref(null));
+        const isSorting = inject('_wwSelect:isSorting', ref(false));
         const virtualScrollMinItemSize = computed(() => props.content.virtualScrollMinItemSize);
         const virtualScrollBuffer = computed(() => props.content.virtualScrollBuffer);
         const heavyMode = computed(() => props.content.heavyMode);
@@ -171,6 +172,8 @@ export default {
             // Apply sorting if sortSelectedToTop is enabled
             if (props.content.sortSelectedToTop && selectedValue.value != null) {
                 try {
+                    isSorting.value = true;
+                    
                     // Create a map of option values to avoid recalculating during sort
                     const optionValueMap = new Map();
                     filtered.forEach((option) => {
@@ -203,8 +206,14 @@ export default {
                         if (!aIsSelected && bIsSelected) return 1;
                         return 0; // Keep original order for items with same selection status
                     });
+                    
+                    // Reset the flag after a brief delay to allow DOM to update
+                    setTimeout(() => {
+                        isSorting.value = false;
+                    }, 100);
                 } catch (error) {
                     console.error('[OptionsList] Error during sorting:', error);
+                    isSorting.value = false;
                     // Return unsorted on error
                     filtered = [...filtered];
                 }
diff --git a/src/wwElement_Select.vue b/src/wwElement_Select.vue
index e99cd5d..51f687a 100644
--- a/src/wwElement_Select.vue
+++ b/src/wwElement_Select.vue
@@ -184,6 +184,7 @@ export default {
         const triggerWidth = ref(0);
         const triggerHeight = ref(0);
         const shouldCloseDropdown = ref(true);
+        const isSorting = ref(false);
         const optionType = computed(() => props.content.optionType || 'text');
         const mappingLabel = computed(() => props.content.mappingLabel);
         const mappingIcon = computed(() => props.content.mappingIcon);
@@ -514,8 +515,9 @@ export default {
             const shouldClose = closeOnClickOutside.value &&
                 isOpen.value &&
                 !triggerElement.value.contains(event.target) &&
-                !dropdownElement.value.contains(event.target) &&
+                !dropdownElement.value?.contains(event.target) &&
                 !isEditing.value &&
+                !isSorting.value &&
                 Date.now() > lastTriggeredComponentAction.value + 400;
             
             console.log('[Select] handleClickOutside:', {
@@ -524,6 +526,7 @@ export default {
                 isOpen: isOpen.value,
                 inTrigger: triggerElement.value?.contains(event.target),
                 inDropdown: dropdownElement.value?.contains(event.target),
+                isSorting: isSorting.value,
                 target: event.target,
                 dropdownElement: dropdownElement.value
             });
@@ -972,6 +975,7 @@ export default {
         provide('_wwSelect:isDisabled', isDisabled);
         provide('_wwSelect:isReadonly', isReadonly);
         provide('_wwSelect:canUnselect', canUnselect);
+        provide('_wwSelect:isSorting', isSorting);
         provide('_wwSelect:searchState', searchState);
         provide('_wwSelect:optionProperties', optionProperties);
         provide('_wwSelect:updateValue', updateValue);

From f9d928b1f7de6c62511ed15e4e08c988b612b7d1 Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Mon, 17 Nov 2025 09:52:31 -0500
Subject: [PATCH 15/24] Add debug logging to Option and Select components

Introduced console.log statements in wwElement_Option.vue and wwElement_Select.vue to provide detailed runtime information for option selection, registration, and unregistration events. This will help with debugging user interactions and option management.
---
 src/wwElement_Option.vue | 16 ++++++++++++++++
 src/wwElement_Select.vue |  2 ++
 2 files changed, 18 insertions(+)

diff --git a/src/wwElement_Option.vue b/src/wwElement_Option.vue
index bac2f66..ab92095 100644
--- a/src/wwElement_Option.vue
+++ b/src/wwElement_Option.vue
@@ -275,13 +275,29 @@ export default {
         );
 
         const handleClick = () => {
+            console.log('[Option] handleClick:', {
+                isSelected: isSelected.value,
+                canInteract: canInteract.value,
+                unselectOnClick: props.content.unselectOnClick,
+                selectOnClick: props.content.selectOnClick,
+                isEditing: isEditing.value,
+                isDisabled: isDisabled.value,
+                isOptionDisabled: isOptionDisabled.value,
+                isReadonly: isReadonly.value,
+                value: value.value
+            });
+            
             if (isSelected.value && canInteract.value && props.content.unselectOnClick) {
+                console.log('[Option] Unselecting...');
                 unselect();
                 focusFromOptionId(null);
             } else if (!isSelected.value && canInteract.value && props.content.selectOnClick) {
+                console.log('[Option] Selecting...');
                 updateValue(value.value);
                 focusFromOptionId(optionId);
                 focusSelectElement();
+            } else {
+                console.log('[Option] No action taken');
             }
         };
 
diff --git a/src/wwElement_Select.vue b/src/wwElement_Select.vue
index 51f687a..1c70007 100644
--- a/src/wwElement_Select.vue
+++ b/src/wwElement_Select.vue
@@ -286,10 +286,12 @@ export default {
 
         // Methods
         const registerOption = (id, option) => {
+            console.log('[Select] registerOption called for id:', id, 'option:', option);
             optionsMap.value.set(id, option);
         };
 
         const unregisterOption = id => {
+            console.log('[Select] unregisterOption called for id:', id);
             optionsMap.value.delete(id);
         };
 

From d9b714bd8b868a0712585392a8f5416712ef3d31 Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Mon, 17 Nov 2025 09:58:44 -0500
Subject: [PATCH 16/24] Update wwElement_Option.vue

---
 src/wwElement_Option.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/wwElement_Option.vue b/src/wwElement_Option.vue
index ab92095..7374322 100644
--- a/src/wwElement_Option.vue
+++ b/src/wwElement_Option.vue
@@ -275,11 +275,14 @@ export default {
         );
 
         const handleClick = () => {
+            const unselectOnClick = props.content.unselectOnClick ?? false;
+            const selectOnClick = props.content.selectOnClick ?? true;
+            
             console.log('[Option] handleClick:', {
                 isSelected: isSelected.value,
                 canInteract: canInteract.value,
-                unselectOnClick: props.content.unselectOnClick,
-                selectOnClick: props.content.selectOnClick,
+                unselectOnClick: unselectOnClick,
+                selectOnClick: selectOnClick,
                 isEditing: isEditing.value,
                 isDisabled: isDisabled.value,
                 isOptionDisabled: isOptionDisabled.value,
@@ -287,11 +290,11 @@ export default {
                 value: value.value
             });
             
-            if (isSelected.value && canInteract.value && props.content.unselectOnClick) {
+            if (isSelected.value && canInteract.value && unselectOnClick) {
                 console.log('[Option] Unselecting...');
                 unselect();
                 focusFromOptionId(null);
-            } else if (!isSelected.value && canInteract.value && props.content.selectOnClick) {
+            } else if (!isSelected.value && canInteract.value && selectOnClick) {
                 console.log('[Option] Selecting...');
                 updateValue(value.value);
                 focusFromOptionId(optionId);

From 795872d5712c06a4284bb310c0d8a3c914e9c35c Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Mon, 17 Nov 2025 12:56:24 -0500
Subject: [PATCH 17/24] Update wwElement_Option.vue

---
 src/wwElement_Option.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/wwElement_Option.vue b/src/wwElement_Option.vue
index 7374322..c7b15b1 100644
--- a/src/wwElement_Option.vue
+++ b/src/wwElement_Option.vue
@@ -277,12 +277,14 @@ export default {
         const handleClick = () => {
             const unselectOnClick = props.content.unselectOnClick ?? false;
             const selectOnClick = props.content.selectOnClick ?? true;
+            const sortSelectedToTop = props.content.sortSelectedToTop ?? false;
             
             console.log('[Option] handleClick:', {
                 isSelected: isSelected.value,
                 canInteract: canInteract.value,
                 unselectOnClick: unselectOnClick,
                 selectOnClick: selectOnClick,
+                sortSelectedToTop: sortSelectedToTop,
                 isEditing: isEditing.value,
                 isDisabled: isDisabled.value,
                 isOptionDisabled: isOptionDisabled.value,
@@ -290,7 +292,12 @@ export default {
                 value: value.value
             });
             
-            if (isSelected.value && canInteract.value && unselectOnClick) {
+            // Allow unselecting if either:
+            // 1. unselectOnClick is explicitly enabled, OR
+            // 2. sortSelectedToTop is enabled (natural UX for sorted items)
+            const canUnselect = unselectOnClick || sortSelectedToTop;
+            
+            if (isSelected.value && canInteract.value && canUnselect) {
                 console.log('[Option] Unselecting...');
                 unselect();
                 focusFromOptionId(null);

From 9d810747aed643d0e19a023502382ae8afbc828a Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Tue, 18 Nov 2025 16:33:30 -0500
Subject: [PATCH 18/24] Add debug logging to options filtering and sorting

Inserted multiple console.log statements throughout the options filtering, sorting, and search logic in wwElement_OptionsList.vue to aid in debugging and tracking state changes during computation and watcher triggers.
---
 src/wwElement_OptionsList.vue | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/wwElement_OptionsList.vue b/src/wwElement_OptionsList.vue
index 52b7faa..dccf3f2 100644
--- a/src/wwElement_OptionsList.vue
+++ b/src/wwElement_OptionsList.vue
@@ -162,15 +162,26 @@ export default {
         const { resolveMappingFormula } = wwLib.wwFormula.useFormula();
 
         const filteredOptions = computed(() => {
+            console.log('[OptionsList] filteredOptions computing...', {
+                hasSearch: searchState.value && searchState.value.value,
+                searchValue: searchState.value?.value,
+                optionsCount: options.value?.length,
+                sortEnabled: props.content.sortSelectedToTop,
+                hasSelectedValue: selectedValue.value != null
+            });
+            
             let filtered = options.value;
             
             // Apply search filter if active
             if (searchState.value && searchState.value.value) {
+                console.log('[OptionsList] Applying search filter');
                 filtered = memoizedFilter(options.value, searchState.value.value);
+                console.log('[OptionsList] Search filtered count:', filtered.length);
             }
             
             // Apply sorting if sortSelectedToTop is enabled
             if (props.content.sortSelectedToTop && selectedValue.value != null) {
+                console.log('[OptionsList] Starting sort operation');
                 try {
                     isSorting.value = true;
                     
@@ -207,6 +218,8 @@ export default {
                         return 0; // Keep original order for items with same selection status
                     });
                     
+                    console.log('[OptionsList] Sort complete');
+                    
                     // Reset the flag after a brief delay to allow DOM to update
                     setTimeout(() => {
                         isSorting.value = false;
@@ -219,6 +232,7 @@ export default {
                 }
             }
             
+            console.log('[OptionsList] filteredOptions complete, count:', filtered.length);
             return filtered;
         });
 
@@ -251,14 +265,25 @@ export default {
         // Watch for search changes only, not sorting changes
         // We need to track the actual filtering, not the sorting
         const searchFilteredCount = computed(() => {
+            console.log('[OptionsList] searchFilteredCount computing');
             if (!searchState.value || !searchState.value.value) return options.value.length;
-            return memoizedFilter(options.value, searchState.value.value).length;
+            const count = memoizedFilter(options.value, searchState.value.value).length;
+            console.log('[OptionsList] searchFilteredCount result:', count);
+            return count;
         });
 
         watch([searchState, searchFilteredCount], () => {
+            console.log('[OptionsList] searchState watcher triggered', {
+                hasSearchValue: searchState.value && searchState.value.value,
+                searchValue: searchState.value?.value,
+                filteredCount: searchFilteredCount.value
+            });
+            
             if (updateSearch && searchState.value && searchState.value.value) {
+                console.log('[OptionsList] Calling updateSearch');
                 const searchMatches = memoizedFilter(options.value, searchState.value.value);
                 updateSearch({ ...searchState.value, searchMatches });
+                console.log('[OptionsList] updateSearch complete');
             }
         }, { deep: true });
 

From f4f611c084a0411c82efd850c2e1add7b6fd36cd Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Tue, 18 Nov 2025 16:45:16 -0500
Subject: [PATCH 19/24] Add debug logging to search input handlers

Inserted console.log statements in debouncedUpdateSearch and handleInputChange to aid debugging and trace search input events and updates.
---
 src/wwElement_Search.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/wwElement_Search.vue b/src/wwElement_Search.vue
index a724e0a..a8c43fa 100644
--- a/src/wwElement_Search.vue
+++ b/src/wwElement_Search.vue
@@ -45,7 +45,12 @@ export default {
         });
 
         const debouncedUpdateSearch = debounce((value, searchBy) => {
-            if (updateSearch) updateSearch({ value, searchBy });
+            console.log('[Search] debouncedUpdateSearch called:', { value, searchBy });
+            if (updateSearch) {
+                console.log('[Search] Calling updateSearch');
+                updateSearch({ value, searchBy });
+                console.log('[Search] updateSearch complete');
+            }
         }, 300);
 
         const searchStyles = computed(() => {
@@ -85,7 +90,9 @@ export default {
 
         // This event come from ww-input-basic => https://github.com/weweb-assets/ww-input-basic
         const handleInputChange = event => {
+            console.log('[Search] handleInputChange called:', event?.target?.value);
             debouncedUpdateSearch(event?.target?.value, searchBy);
+            console.log('[Search] handleInputChange - debounced update queued');
         };
 
         const handleSearchFocus = () => {

From 447a461ce005e6c3aa90d65919afc65f53a1a580 Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Tue, 18 Nov 2025 16:46:14 -0500
Subject: [PATCH 20/24] Add files via upload

---
 src/wwElement_OptionsList.vue | 27 ++++++++++++++++++++++++++-
 src/wwElement_Search.vue      | 16 ++++++++++++++--
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/wwElement_OptionsList.vue b/src/wwElement_OptionsList.vue
index 52b7faa..dccf3f2 100644
--- a/src/wwElement_OptionsList.vue
+++ b/src/wwElement_OptionsList.vue
@@ -162,15 +162,26 @@ export default {
         const { resolveMappingFormula } = wwLib.wwFormula.useFormula();
 
         const filteredOptions = computed(() => {
+            console.log('[OptionsList] filteredOptions computing...', {
+                hasSearch: searchState.value && searchState.value.value,
+                searchValue: searchState.value?.value,
+                optionsCount: options.value?.length,
+                sortEnabled: props.content.sortSelectedToTop,
+                hasSelectedValue: selectedValue.value != null
+            });
+            
             let filtered = options.value;
             
             // Apply search filter if active
             if (searchState.value && searchState.value.value) {
+                console.log('[OptionsList] Applying search filter');
                 filtered = memoizedFilter(options.value, searchState.value.value);
+                console.log('[OptionsList] Search filtered count:', filtered.length);
             }
             
             // Apply sorting if sortSelectedToTop is enabled
             if (props.content.sortSelectedToTop && selectedValue.value != null) {
+                console.log('[OptionsList] Starting sort operation');
                 try {
                     isSorting.value = true;
                     
@@ -207,6 +218,8 @@ export default {
                         return 0; // Keep original order for items with same selection status
                     });
                     
+                    console.log('[OptionsList] Sort complete');
+                    
                     // Reset the flag after a brief delay to allow DOM to update
                     setTimeout(() => {
                         isSorting.value = false;
@@ -219,6 +232,7 @@ export default {
                 }
             }
             
+            console.log('[OptionsList] filteredOptions complete, count:', filtered.length);
             return filtered;
         });
 
@@ -251,14 +265,25 @@ export default {
         // Watch for search changes only, not sorting changes
         // We need to track the actual filtering, not the sorting
         const searchFilteredCount = computed(() => {
+            console.log('[OptionsList] searchFilteredCount computing');
             if (!searchState.value || !searchState.value.value) return options.value.length;
-            return memoizedFilter(options.value, searchState.value.value).length;
+            const count = memoizedFilter(options.value, searchState.value.value).length;
+            console.log('[OptionsList] searchFilteredCount result:', count);
+            return count;
         });
 
         watch([searchState, searchFilteredCount], () => {
+            console.log('[OptionsList] searchState watcher triggered', {
+                hasSearchValue: searchState.value && searchState.value.value,
+                searchValue: searchState.value?.value,
+                filteredCount: searchFilteredCount.value
+            });
+            
             if (updateSearch && searchState.value && searchState.value.value) {
+                console.log('[OptionsList] Calling updateSearch');
                 const searchMatches = memoizedFilter(options.value, searchState.value.value);
                 updateSearch({ ...searchState.value, searchMatches });
+                console.log('[OptionsList] updateSearch complete');
             }
         }, { deep: true });
 
diff --git a/src/wwElement_Search.vue b/src/wwElement_Search.vue
index a724e0a..097c443 100644
--- a/src/wwElement_Search.vue
+++ b/src/wwElement_Search.vue
@@ -45,7 +45,12 @@ export default {
         });
 
         const debouncedUpdateSearch = debounce((value, searchBy) => {
-            if (updateSearch) updateSearch({ value, searchBy });
+            console.log('[Search] debouncedUpdateSearch called:', { value, searchBy });
+            if (updateSearch) {
+                console.log('[Search] Calling updateSearch');
+                updateSearch({ value, searchBy });
+                console.log('[Search] updateSearch complete');
+            }
         }, 300);
 
         const searchStyles = computed(() => {
@@ -85,7 +90,9 @@ export default {
 
         // This event come from ww-input-basic => https://github.com/weweb-assets/ww-input-basic
         const handleInputChange = event => {
+            console.log('[Search] handleInputChange called:', event?.target?.value);
             debouncedUpdateSearch(event?.target?.value, searchBy);
+            console.log('[Search] handleInputChange - debounced update queued');
         };
 
         const handleSearchFocus = () => {
@@ -101,11 +108,16 @@ export default {
         });
 
         onMounted(() => {
+            console.log('[Search] Component mounted');
             if (updateHasSearch) updateHasSearch(true);
-            if (updateSearch) updateSearch({ value: '', searchBy, searchMatches: [] });
+            if (updateSearch) {
+                console.log('[Search] Initializing search with empty value');
+                updateSearch({ value: '', searchBy, searchMatches: [] });
+            }
         });
 
         onBeforeUnmount(() => {
+            console.log('[Search] Component unmounting');
             if (updateHasSearch) updateHasSearch(false);
         });
 

From 4283a5f4edee8efb1b7aa3b7350cba14016e4552 Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Tue, 18 Nov 2025 16:52:22 -0500
Subject: [PATCH 21/24] Update wwElement_OptionsList.vue

---
 src/wwElement_OptionsList.vue | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/wwElement_OptionsList.vue b/src/wwElement_OptionsList.vue
index dccf3f2..89803be 100644
--- a/src/wwElement_OptionsList.vue
+++ b/src/wwElement_OptionsList.vue
@@ -272,20 +272,27 @@ export default {
             return count;
         });
 
-        watch([searchState, searchFilteredCount], () => {
-            console.log('[OptionsList] searchState watcher triggered', {
-                hasSearchValue: searchState.value && searchState.value.value,
-                searchValue: searchState.value?.value,
-                filteredCount: searchFilteredCount.value
+        // Only update search matches when the search value changes, not when matches change
+        // This prevents infinite loops
+        let lastSearchValue = null;
+        watch(() => searchState.value?.value, (newSearchValue) => {
+            console.log('[OptionsList] searchValue watcher triggered', {
+                newSearchValue,
+                lastSearchValue,
+                hasChanged: newSearchValue !== lastSearchValue
             });
             
-            if (updateSearch && searchState.value && searchState.value.value) {
+            if (updateSearch && newSearchValue && newSearchValue !== lastSearchValue) {
                 console.log('[OptionsList] Calling updateSearch');
-                const searchMatches = memoizedFilter(options.value, searchState.value.value);
+                const searchMatches = memoizedFilter(options.value, newSearchValue);
                 updateSearch({ ...searchState.value, searchMatches });
+                lastSearchValue = newSearchValue;
                 console.log('[OptionsList] updateSearch complete');
+            } else if (!newSearchValue) {
+                // Reset when search is cleared
+                lastSearchValue = null;
             }
-        }, { deep: true });
+        });
 
         // Styles
         const scrollerStyle = computed(() => {

From 54ca2bb12056d730dffaea9b3da2dc12a57ac3f5 Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Tue, 18 Nov 2025 16:58:54 -0500
Subject: [PATCH 22/24] Move search filtering logic to Search component

Removed unused searchFilteredCount and watcher from OptionsList to prevent infinite loops. Search filtering and searchMatches computation are now handled directly in the Search component, improving separation of concerns and reliability.
---
 src/wwElement_OptionsList.vue | 33 ++-------------------
 src/wwElement_Search.vue      | 56 +++++++++++++++++++++++++++++++++--
 2 files changed, 56 insertions(+), 33 deletions(-)

diff --git a/src/wwElement_OptionsList.vue b/src/wwElement_OptionsList.vue
index 89803be..a024633 100644
--- a/src/wwElement_OptionsList.vue
+++ b/src/wwElement_OptionsList.vue
@@ -262,37 +262,8 @@ export default {
             });
         });
 
-        // Watch for search changes only, not sorting changes
-        // We need to track the actual filtering, not the sorting
-        const searchFilteredCount = computed(() => {
-            console.log('[OptionsList] searchFilteredCount computing');
-            if (!searchState.value || !searchState.value.value) return options.value.length;
-            const count = memoizedFilter(options.value, searchState.value.value).length;
-            console.log('[OptionsList] searchFilteredCount result:', count);
-            return count;
-        });
-
-        // Only update search matches when the search value changes, not when matches change
-        // This prevents infinite loops
-        let lastSearchValue = null;
-        watch(() => searchState.value?.value, (newSearchValue) => {
-            console.log('[OptionsList] searchValue watcher triggered', {
-                newSearchValue,
-                lastSearchValue,
-                hasChanged: newSearchValue !== lastSearchValue
-            });
-            
-            if (updateSearch && newSearchValue && newSearchValue !== lastSearchValue) {
-                console.log('[OptionsList] Calling updateSearch');
-                const searchMatches = memoizedFilter(options.value, newSearchValue);
-                updateSearch({ ...searchState.value, searchMatches });
-                lastSearchValue = newSearchValue;
-                console.log('[OptionsList] updateSearch complete');
-            } else if (!newSearchValue) {
-                // Reset when search is cleared
-                lastSearchValue = null;
-            }
-        });
+        // searchFilteredCount is NOT used anymore - removed to prevent infinite loop
+        // The Search component handles updating searchMatches directly
 
         // Styles
         const scrollerStyle = computed(() => {
diff --git a/src/wwElement_Search.vue b/src/wwElement_Search.vue
index 097c443..386f8c3 100644
--- a/src/wwElement_Search.vue
+++ b/src/wwElement_Search.vue
@@ -35,6 +35,9 @@ export default {
             '_wwSelect:useSearch',
             {}
         );
+        const rawData = inject('_wwSelect:rawData', ref([]));
+        const searchState = inject('_wwSelect:searchState', ref(null));
+        
         const searchElementRef = ref(null);
         const searchElement = computed(() => searchElementRef.value);
         const searchBy = computed(() => {
@@ -43,13 +46,62 @@ export default {
                 .map(item => JSON.parse(item.filter.replace(/'/g, '"')))
                 .flat();
         });
+        
+        const options = computed(() => {
+            const items = rawData.value;
+            return Array.isArray(items) ? items : [];
+        });
+
+        // Helper function to filter options based on search value
+        const filterOptions = (options, filterValue) => {
+            if (!filterValue) return options;
+            
+            return options.filter(option => {
+                // Handle primitive values directly
+                const isPrimitive = typeof option !== 'object' || option === null;
+                if (isPrimitive) {
+                    const normalizedOption = option
+                        .toString()
+                        .normalize('NFD')
+                        .replace(/[\u0300-\u036f]/g, '')
+                        .toLowerCase();
+                    const normalizedFilter = filterValue
+                        .normalize('NFD')
+                        .replace(/[\u0300-\u036f]/g, '')
+                        .toLowerCase();
+                    return normalizedOption.includes(normalizedFilter);
+                } else {
+                    // For objects, use the existing search logic
+                    const searchByFields = searchState.value?.searchBy?.length
+                        ? searchState.value?.searchBy
+                        : Object.keys(option);
+                    return searchByFields.some(key => {
+                        const optionValue = option[key];
+                        if (!optionValue) return false;
+                        const normalizedOption = optionValue
+                            .toString()
+                            .normalize('NFD')
+                            .replace(/[\u0300-\u036f]/g, '')
+                            .toLowerCase();
+                        const normalizedFilter = filterValue
+                            .normalize('NFD')
+                            .replace(/[\u0300-\u036f]/g, '')
+                            .toLowerCase();
+
+                        return normalizedOption.includes(normalizedFilter);
+                    });
+                }
+            });
+        };
 
         const debouncedUpdateSearch = debounce((value, searchBy) => {
             console.log('[Search] debouncedUpdateSearch called:', { value, searchBy });
             if (updateSearch) {
                 console.log('[Search] Calling updateSearch');
-                updateSearch({ value, searchBy });
-                console.log('[Search] updateSearch complete');
+                // Compute searchMatches here in the Search component
+                const searchMatches = value ? filterOptions(options.value, value) : [];
+                updateSearch({ value, searchBy, searchMatches });
+                console.log('[Search] updateSearch complete, matches:', searchMatches.length);
             }
         }, 300);
 

From cde1e3398df964e00e82b31b542bb5270cdd887c Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Tue, 18 Nov 2025 17:03:30 -0500
Subject: [PATCH 23/24] Remove debug console.log statements from components

Eliminated various console.log calls used for debugging in wwElement_Option.vue, wwElement_OptionsList.vue, wwElement_Search.vue, and wwElement_Select.vue to clean up the codebase and improve performance.
---
 src/wwElement_Option.vue      | 17 ---------------
 src/wwElement_OptionsList.vue | 14 ------------
 src/wwElement_Search.vue      |  8 -------
 src/wwElement_Select.vue      | 40 -----------------------------------
 4 files changed, 79 deletions(-)

diff --git a/src/wwElement_Option.vue b/src/wwElement_Option.vue
index c7b15b1..f93dd82 100644
--- a/src/wwElement_Option.vue
+++ b/src/wwElement_Option.vue
@@ -279,35 +279,18 @@ export default {
             const selectOnClick = props.content.selectOnClick ?? true;
             const sortSelectedToTop = props.content.sortSelectedToTop ?? false;
             
-            console.log('[Option] handleClick:', {
-                isSelected: isSelected.value,
-                canInteract: canInteract.value,
-                unselectOnClick: unselectOnClick,
-                selectOnClick: selectOnClick,
-                sortSelectedToTop: sortSelectedToTop,
-                isEditing: isEditing.value,
-                isDisabled: isDisabled.value,
-                isOptionDisabled: isOptionDisabled.value,
-                isReadonly: isReadonly.value,
-                value: value.value
-            });
-            
             // Allow unselecting if either:
             // 1. unselectOnClick is explicitly enabled, OR
             // 2. sortSelectedToTop is enabled (natural UX for sorted items)
             const canUnselect = unselectOnClick || sortSelectedToTop;
             
             if (isSelected.value && canInteract.value && canUnselect) {
-                console.log('[Option] Unselecting...');
                 unselect();
                 focusFromOptionId(null);
             } else if (!isSelected.value && canInteract.value && selectOnClick) {
-                console.log('[Option] Selecting...');
                 updateValue(value.value);
                 focusFromOptionId(optionId);
                 focusSelectElement();
-            } else {
-                console.log('[Option] No action taken');
             }
         };
 
diff --git a/src/wwElement_OptionsList.vue b/src/wwElement_OptionsList.vue
index a024633..8574d52 100644
--- a/src/wwElement_OptionsList.vue
+++ b/src/wwElement_OptionsList.vue
@@ -162,26 +162,15 @@ export default {
         const { resolveMappingFormula } = wwLib.wwFormula.useFormula();
 
         const filteredOptions = computed(() => {
-            console.log('[OptionsList] filteredOptions computing...', {
-                hasSearch: searchState.value && searchState.value.value,
-                searchValue: searchState.value?.value,
-                optionsCount: options.value?.length,
-                sortEnabled: props.content.sortSelectedToTop,
-                hasSelectedValue: selectedValue.value != null
-            });
-            
             let filtered = options.value;
             
             // Apply search filter if active
             if (searchState.value && searchState.value.value) {
-                console.log('[OptionsList] Applying search filter');
                 filtered = memoizedFilter(options.value, searchState.value.value);
-                console.log('[OptionsList] Search filtered count:', filtered.length);
             }
             
             // Apply sorting if sortSelectedToTop is enabled
             if (props.content.sortSelectedToTop && selectedValue.value != null) {
-                console.log('[OptionsList] Starting sort operation');
                 try {
                     isSorting.value = true;
                     
@@ -218,8 +207,6 @@ export default {
                         return 0; // Keep original order for items with same selection status
                     });
                     
-                    console.log('[OptionsList] Sort complete');
-                    
                     // Reset the flag after a brief delay to allow DOM to update
                     setTimeout(() => {
                         isSorting.value = false;
@@ -232,7 +219,6 @@ export default {
                 }
             }
             
-            console.log('[OptionsList] filteredOptions complete, count:', filtered.length);
             return filtered;
         });
 
diff --git a/src/wwElement_Search.vue b/src/wwElement_Search.vue
index 386f8c3..62904e2 100644
--- a/src/wwElement_Search.vue
+++ b/src/wwElement_Search.vue
@@ -95,13 +95,10 @@ export default {
         };
 
         const debouncedUpdateSearch = debounce((value, searchBy) => {
-            console.log('[Search] debouncedUpdateSearch called:', { value, searchBy });
             if (updateSearch) {
-                console.log('[Search] Calling updateSearch');
                 // Compute searchMatches here in the Search component
                 const searchMatches = value ? filterOptions(options.value, value) : [];
                 updateSearch({ value, searchBy, searchMatches });
-                console.log('[Search] updateSearch complete, matches:', searchMatches.length);
             }
         }, 300);
 
@@ -142,9 +139,7 @@ export default {
 
         // This event come from ww-input-basic => https://github.com/weweb-assets/ww-input-basic
         const handleInputChange = event => {
-            console.log('[Search] handleInputChange called:', event?.target?.value);
             debouncedUpdateSearch(event?.target?.value, searchBy);
-            console.log('[Search] handleInputChange - debounced update queued');
         };
 
         const handleSearchFocus = () => {
@@ -160,16 +155,13 @@ export default {
         });
 
         onMounted(() => {
-            console.log('[Search] Component mounted');
             if (updateHasSearch) updateHasSearch(true);
             if (updateSearch) {
-                console.log('[Search] Initializing search with empty value');
                 updateSearch({ value: '', searchBy, searchMatches: [] });
             }
         });
 
         onBeforeUnmount(() => {
-            console.log('[Search] Component unmounting');
             if (updateHasSearch) updateHasSearch(false);
         });
 
diff --git a/src/wwElement_Select.vue b/src/wwElement_Select.vue
index 1c70007..1c8d7f3 100644
--- a/src/wwElement_Select.vue
+++ b/src/wwElement_Select.vue
@@ -194,29 +194,6 @@ export default {
         const showSearch = computed(() => props.content.showSearch);
         const allowScrollingWhenOpen = computed(() => props.content.allowScrollingWhenOpen);
 
-        // Debug: Watch isOpen changes
-        watch(isOpen, (newVal, oldVal) => {
-            console.log('[Select] isOpen changed:', { from: oldVal, to: newVal, stack: new Error().stack });
-        });
-
-        // Debug: Watch sortSelectedToTop prop
-        watch(() => props.content.sortSelectedToTop, (newVal, oldVal) => {
-            console.log('[Select] sortSelectedToTop changed:', { from: oldVal, to: newVal });
-        });
-
-        // Debug: Watch props.content reference
-        watch(() => props.content, (newVal, oldVal) => {
-            console.log('[Select] props.content reference changed:', { 
-                same: newVal === oldVal,
-                initialState: newVal.initialState 
-            });
-        });
-
-        // Debug: Watch initialState
-        watch(initialState, (newVal, oldVal) => {
-            console.log('[Select] initialState changed:', { from: oldVal, to: newVal });
-        });
-
         // Styles
         const syncFloating = () => {
             if (!triggerElement?.value) return;
@@ -286,12 +263,10 @@ export default {
 
         // Methods
         const registerOption = (id, option) => {
-            console.log('[Select] registerOption called for id:', id, 'option:', option);
             optionsMap.value.set(id, option);
         };
 
         const unregisterOption = id => {
-            console.log('[Select] unregisterOption called for id:', id);
             optionsMap.value.delete(id);
         };
 
@@ -340,7 +315,6 @@ export default {
         };
 
         const toggleValueAccessibility = value => {
-            console.log('[Select] toggleValueAccessibility called, value:', value, 'closeOnSelect:', props.content.closeOnSelect);
             // Don't process empty values
             if (value === '' || value == null || value === undefined) {
                 return;
@@ -492,9 +466,6 @@ export default {
         }
 
         function closeDropdown() {
-            const stack = new Error().stack;
-            const caller = stack.split('\n')[2]?.trim(); // Get the calling line
-            console.log('[Select] closeDropdown called from:', caller, 'shouldClose:', shouldCloseDropdown.value);
             if (!shouldCloseDropdown.value) return;
 
             resetSearch();
@@ -522,17 +493,6 @@ export default {
                 !isSorting.value &&
                 Date.now() > lastTriggeredComponentAction.value + 400;
             
-            console.log('[Select] handleClickOutside:', {
-                shouldClose,
-                closeOnClickOutside: closeOnClickOutside.value,
-                isOpen: isOpen.value,
-                inTrigger: triggerElement.value?.contains(event.target),
-                inDropdown: dropdownElement.value?.contains(event.target),
-                isSorting: isSorting.value,
-                target: event.target,
-                dropdownElement: dropdownElement.value
-            });
-            
             if (shouldClose) {
                 closeDropdown();
             }

From d18382bef577a92145b93a9ffd9a9f2114ac6143 Mon Sep 17 00:00:00 2001
From: jaredgibb <70493366+jaredgibb@users.noreply.github.com>
Date: Mon, 23 Feb 2026 10:25:02 -0500
Subject: [PATCH 24/24] Emit per-item change event (changeOneItem)

Add a new 'changeOneItem' trigger/event and wire it through the select components. AI.md and ww-config.js document/register the new event. wwElement_Select.vue: refactor updateValue to accept an optional oneItemValue, centralize event emission into emitChangeEvents (which emits both 'change' and optionally 'changeOneItem'), and adjust multi/single-select handling to pass the per-item value when appropriate. wwElement_Option.vue: pass the option value when unselecting so the per-item event can be emitted. This enables listening for single-item changes without parsing the full value payload.
---
 AI.md                    |  1 +
 src/wwElement_Option.vue |  2 +-
 src/wwElement_Select.vue | 28 ++++++++++++++++++----------
 ww-config.js             |  1 +
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/AI.md b/AI.md
index 8d685bf..5f5c915 100644
--- a/AI.md
+++ b/AI.md
@@ -188,6 +188,7 @@ Note: chip properties for multiselect, and selected properties for single select
 **_Events:_**
 
 -   change: Triggered when selection changes. Payload: { value: any }
+-   changeOneItem: Triggered when a single item is changed/clicked. Payload: { value: any }
 -   initValueChange: Triggered when initial value changes. Payload: { value: any }
 
 **_Context:_**
diff --git a/src/wwElement_Option.vue b/src/wwElement_Option.vue
index f93dd82..56951c9 100644
--- a/src/wwElement_Option.vue
+++ b/src/wwElement_Option.vue
@@ -315,7 +315,7 @@ export default {
         const unselect = () => {
             if (canInteract.value) {
                 if (selectType.value === 'single') {
-                    updateValue(null);
+                    updateValue(null, value.value);
                 } else {
                     removeSpecificValue(value.value);
                 }
diff --git a/src/wwElement_Select.vue b/src/wwElement_Select.vue
index 1c8d7f3..71b8384 100644
--- a/src/wwElement_Select.vue
+++ b/src/wwElement_Select.vue
@@ -278,7 +278,7 @@ export default {
             searchState.value = filter;
         };
 
-        const updateValue = value => {
+        const updateValue = (value, oneItemValue) => {
             if (selectType.value === 'single') {
                 // Check if value is an array
                 if (Array.isArray(value)) {
@@ -286,15 +286,13 @@ export default {
                     value = value[0];
                 }
                 setValue(value);
-                emit('trigger-event', { name: 'change', event: { value } });
+                emitChangeEvents(value, { emitOneItem: true, oneItemValue: oneItemValue ?? value });
             } else {
                 // Check if value is an array
-                if (!Array.isArray(value)) {
-                    value = [value];
-                }
+                const valuesToApply = Array.isArray(value) ? value : [value];
 
                 const currentValue = Array.isArray(variableValue.value) ? [...variableValue.value] : [];
-                for (let iValue of value) {
+                for (let iValue of valuesToApply) {
                     // Find index using the utility function
                     const valueIndex = findValueIndex(currentValue, iValue);
 
@@ -308,7 +306,10 @@ export default {
                 }
 
                 setValue(currentValue);
-                emit('trigger-event', { name: 'change', event: { value: currentValue } });
+                emitChangeEvents(currentValue, {
+                    emitOneItem: valuesToApply.length === 1,
+                    oneItemValue: valuesToApply[0],
+                });
             }
 
             if (props.content.closeOnSelect) closeDropdown();
@@ -384,7 +385,7 @@ export default {
 
             // Only emit change event if the value actually changed
             if (valueChanged) {
-                emit('trigger-event', { name: 'change', event: { value: eventValue } });
+                emitChangeEvents(eventValue, { emitOneItem: true, oneItemValue: value });
             }
         };
 
@@ -412,7 +413,7 @@ export default {
                 setValue(currentValue);
             }
 
-            emit('trigger-event', { name: 'change', event: { value: currentValue } });
+            emitChangeEvents(currentValue, { emitOneItem: true, oneItemValue: valueToRemove });
 
             // Close dropdown if closeOnSelect is enabled, just like regular selection
             if (props.content.closeOnSelect) {
@@ -481,7 +482,7 @@ export default {
 
         function resetValue() {
             setValue(initValue.value || null);
-            emit('trigger-event', { name: 'change', event: { value: initValue.value || null } });
+            emitChangeEvents(initValue.value || null);
         }
 
         function handleClickOutside(event) {
@@ -658,6 +659,13 @@ export default {
             }
         });
 
+        function emitChangeEvents(value, { emitOneItem = false, oneItemValue } = {}) {
+            emit('trigger-event', { name: 'change', event: { value } });
+            if (emitOneItem) {
+                emit('trigger-event', { name: 'changeOneItem', event: { value: oneItemValue } });
+            }
+        }
+
         const _options = computed(() => options.value?.map(({ optionId, ...option }) => option) || ref([])); // Hide optionId
 
         const data = ref({
diff --git a/ww-config.js b/ww-config.js
index 3f89a0f..83ec842 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -238,6 +238,7 @@ export default {
     states: ['focus', 'readonly'],
     triggerEvents: [
         { name: 'change', label: { en: 'On change' }, event: { value: '' }, default: true },
+        { name: 'changeOneItem', label: { en: 'On change 1 item' }, event: { value: '' } },
         { name: 'initValueChange', label: { en: 'On init value change' }, event: { value: '' } },
         { name: 'focus', label: { en: 'On focus' }, event: { value: '' } },
         { name: 'blur', label: { en: 'On blur' }, event: { value: '' } },