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 bac2f66..56951c9 100644
--- a/src/wwElement_Option.vue
+++ b/src/wwElement_Option.vue
@@ -275,10 +275,19 @@ export default {
         );
 
         const handleClick = () => {
-            if (isSelected.value && canInteract.value && props.content.unselectOnClick) {
+            const unselectOnClick = props.content.unselectOnClick ?? false;
+            const selectOnClick = props.content.selectOnClick ?? true;
+            const sortSelectedToTop = props.content.sortSelectedToTop ?? false;
+            
+            // 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) {
                 unselect();
                 focusFromOptionId(null);
-            } else if (!isSelected.value && canInteract.value && props.content.selectOnClick) {
+            } else if (!isSelected.value && canInteract.value && selectOnClick) {
                 updateValue(value.value);
                 focusFromOptionId(optionId);
                 focusSelectElement();
@@ -306,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_OptionsList.vue b/src/wwElement_OptionsList.vue
index eaf9041..8574d52 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 */
@@ -99,6 +100,9 @@ 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 isSorting = inject('_wwSelect:isSorting', ref(false));
         const virtualScrollMinItemSize = computed(() => props.content.virtualScrollMinItemSize);
         const virtualScrollBuffer = computed(() => props.content.virtualScrollBuffer);
         const heavyMode = computed(() => props.content.heavyMode);
@@ -155,9 +159,66 @@ export default {
             });
         });
 
+        const { resolveMappingFormula } = wwLib.wwFormula.useFormula();
+
         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 != null) {
+                try {
+                    isSorting.value = true;
+                    
+                    // 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);
+                        }
+                        
+                        // 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
+                    });
+                    
+                    // 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];
+                }
+            }
+            
             return filtered;
         });
 
@@ -166,21 +227,29 @@ 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}` };
+                    }
                 }
             });
         });
 
-        watch(filteredOptions, () => {
-            if (updateSearch) {
-                const searchMatches = searchState.value && searchState.value.value ? filteredOptions.value : [];
-                updateSearch({ ...searchState.value, searchMatches });
-            }
-        });
+        // 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 a724e0a..62904e2 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,9 +46,60 @@ 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) => {
-            if (updateSearch) updateSearch({ value, searchBy });
+            if (updateSearch) {
+                // Compute searchMatches here in the Search component
+                const searchMatches = value ? filterOptions(options.value, value) : [];
+                updateSearch({ value, searchBy, searchMatches });
+            }
         }, 300);
 
         const searchStyles = computed(() => {
@@ -102,7 +156,9 @@ export default {
 
         onMounted(() => {
             if (updateHasSearch) updateHasSearch(true);
-            if (updateSearch) updateSearch({ value: '', searchBy, searchMatches: [] });
+            if (updateSearch) {
+                updateSearch({ value: '', searchBy, searchMatches: [] });
+            }
         });
 
         onBeforeUnmount(() => {
diff --git a/src/wwElement_Select.vue b/src/wwElement_Select.vue
index e141832..71b8384 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);
@@ -277,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)) {
@@ -285,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);
 
@@ -307,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();
@@ -383,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 });
             }
         };
 
@@ -411,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) {
@@ -480,18 +482,19 @@ 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) {
-            if (
-                closeOnClickOutside.value &&
+            const shouldClose = closeOnClickOutside.value &&
                 isOpen.value &&
                 !triggerElement.value.contains(event.target) &&
-                !dropdownElement.value.contains(event.target) &&
+                !dropdownElement.value?.contains(event.target) &&
                 !isEditing.value &&
-                Date.now() > lastTriggeredComponentAction.value + 400
-            ) {
+                !isSorting.value &&
+                Date.now() > lastTriggeredComponentAction.value + 400;
+            
+            if (shouldClose) {
                 closeDropdown();
             }
         }
@@ -656,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({
@@ -935,6 +945,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);
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..83ec842 100644
--- a/ww-config.js
+++ b/ww-config.js
@@ -194,6 +194,8 @@ export default {
                     'searchPlaceholder',
                     'initialState',
                     'selectType',
+                    'displayMode',
+                    'displayText',
                     'selectTypeWarning',
                 ],
             },
@@ -210,6 +212,7 @@ export default {
                     'closeOnClickOutside',
                     'manualTrigger',
                     'selectOnClick',
+                    'sortSelectedToTop',
                     'virtualScroll',
                     'virtualScrollBuffer',
                     'virtualScrollMinItemSize',
@@ -235,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: '' } },
@@ -521,6 +525,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',
@@ -1025,6 +1078,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',