feat(select): Add toggle button and remove force open in editor option (WW-3773)

Author: leo91000

src/wwElement_Select.vue

@@ -106,18 +106,13 @@ export default {
             // eslint-disable-next-line no-unreachable
             return false;
         });
-        const forceOpenInEditor = computed(() => {
-            /* wwEditor:start */
-            return props.wwEditorState.sidepanelContent.forceOpenInEditor;
-            /* wwEditor:end */
-            return false;
-        });
+        const forceOpenInEditor = ref(false);
 
         const appDivRef = shallowRef(wwLib.getFrontDocument().querySelector('#app'));
 
         const selectType = computed(() => props.content.selectType);
         const initValue = computed(() =>
-            selectType.value === 'single' ? props.content.initValueSingle ?? null : props.content.initValueMulti || []
+            selectType.value === 'single' ? (props.content.initValueSingle ?? null) : props.content.initValueMulti || []
         );
         const { value: variableValue, setValue } = wwLib.wwVariable.useComponentVariable({
             uid: props.uid,
@@ -281,7 +276,7 @@ export default {
                 }
             } else {
                 const currentValue = Array.isArray(variableValue.value) ? [...variableValue.value] : [];
-                
+
                 // Find the index with proper object comparison if needed
                 let valueIndex = -1;
                 if (typeof value === 'object' && value !== null) {
@@ -321,7 +316,7 @@ export default {
             shouldCloseDropdown.value = false;
 
             const currentValue = Array.isArray(variableValue.value) ? [...variableValue.value] : [];
-            
+
             // Find index using the utility function
             const valueIndex = findValueIndex(currentValue, valueToRemove);
 
@@ -440,7 +435,7 @@ export default {
                     option,
                 ])
             );
-            
+
             // Format option for display
             const formatOption = opt => ({
                 value: resolveMappingFormula(toValue(mappingValue), opt) ?? opt.value,
@@ -450,33 +445,31 @@ export default {
             });
 
             // Find option by value using the utility function
-            const findOptionByValue = (value) => {
+            const findOptionByValue = value => {
                 // Use the utility function to find an entry with matching key
-                const entry = Array.from(_optionsMap.entries()).find(([key, _]) => 
-                    areValuesEqual(key, value)
-                );
+                const entry = Array.from(_optionsMap.entries()).find(([key, _]) => areValuesEqual(key, value));
                 return entry ? entry[1] : null;
             };
-            
+
             // Handle single select
             if (selectType.value === 'single') {
                 const option = findOptionByValue(variableValue.value);
                 return option ? formatOption(option) : null;
-            } 
+            }
             // Handle multiple select
             else {
                 const selectedValues = Array.isArray(variableValue.value) ? variableValue.value : [];
                 return selectedValues.map(value => {
                     const option = findOptionByValue(value);
-                    
+
                     if (!option) {
                         return {
                             value,
                             isInOptions: false,
                             info: 'This value is not in the defined options',
                         };
                     }
-                    
+
                     return formatOption(option);
                 });
             }
@@ -500,19 +493,25 @@ export default {
 
         // Initialize passive event support detection
         try {
-            window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
-                get: function () { supportsPassive = true; } 
-            }));
-        } catch(e) {}
+            window.addEventListener(
+                'test',
+                null,
+                Object.defineProperty({}, 'passive', {
+                    get: function () {
+                        supportsPassive = true;
+                    },
+                })
+            );
+        } catch (e) {}
 
         wheelOpt = supportsPassive ? { passive: false } : false;
         wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
 
-        const preventDefault = (e) => {
+        const preventDefault = e => {
             e.preventDefault();
         };
 
-        const preventDefaultForScrollKeys = (e) => {
+        const preventDefaultForScrollKeys = e => {
             const keys = { 37: 1, 38: 1, 39: 1, 40: 1 };
             if (keys[e.keyCode]) {
                 preventDefault(e);
@@ -865,6 +864,9 @@ export default {
             this.resetLastTriggerComponentAction();
             this.resetSearch();
         },
+        toggleForceOpenInEditor() {
+            this.forceOpenInEditor = !this.forceOpenInEditor;
+        },
     },
 };
 </script>

ww-config.js

@@ -138,7 +138,7 @@ export default {
             ],
         ],
         customSettingsPropertiesOrder: [
-            'forceOpenInEditor',
+            'toggleSelect',
             'showEmptyStateInEditor',
             'choices',
             'mappingLabel',
@@ -196,11 +196,6 @@ export default {
             action: 'actionCloseDropdown',
             args: [],
         },
-        {
-            label: 'Toggle',
-            action: 'actionToggleDropdown',
-            args: [],
-        },
         {
             label: 'Set value',
             action: 'actionUpdateValue',
@@ -233,8 +228,22 @@ export default {
             action: 'actionResetSearch',
             args: [],
         },
+        {
+            label: 'Toggle force open in editor',
+            action: 'toggleForceOpenInEditor',
+            args: [],
+        },
     ],
     properties: {
+        toggleSelect: {
+            type: 'Button',
+            editorOnly: true,
+            section: 'settings',
+            options: {
+                text: { en: 'Toggle' },
+                action: 'toggleForceOpenInEditor',
+            },
+        },
         // >>>>>>>>>>> SELECT <<<<<<<<<<
         choices: {
             label: {
@@ -429,13 +438,6 @@ export default {
             /* wwEditor:end */
             section: 'settings',
         },
-        forceOpenInEditor: {
-            label: { en: 'Force open in editor' },
-            type: 'OnOff',
-            defaultValue: false,
-            editorOnly: true,
-            section: 'settings',
-        },
         initialState: {
             label: { en: 'Initial state' },
             type: 'TextSelect',
@@ -808,8 +810,7 @@ export default {
             bindable: true,
             responsive: true,
             propertyHelp: {
-                tooltip:
-                    'This should be disabled in some edge cases like in popups, datagrid, etc.',
+                tooltip: 'This should be disabled in some edge cases like in popups, datagrid, etc.',
             },
             bindingValidation: {
                 type: 'boolean',