{"record":{"id":"9a58def3de342ed8","repo":"octobercms/october","slug":"radio-button-and-checkbox-dropdown-menu-items-cann","errorCode":null,"errorMessage":"Radio button and checkbox dropdown menu items cannot have icons","messagePattern":"Radio button and checkbox dropdown menu items cannot have icons","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"modules/backend/vuecomponents/dropdownmenu/assets/js/sheet.js","lineNumber":28,"sourceCode":"    },\n    data: function() {\n        return {\n            visible: false,\n            submenuVisible: false,\n            menuItemRefs: [],\n            componentUid: null\n        };\n    },\n    computed: {\n        menuClassName: function computeMenuClassName() {\n            var hasIcons = false,\n                hasSubmenus = false;\n\n            for (var index = 0; index < this.items.length; index++) {\n                var hasState = ['radiobutton', 'checkbox'].indexOf(this.items[index].type) !== -1;\n\n                if (this.items[index].icon && hasState) {\n                    throw new Error('Radio button and checkbox dropdown menu items cannot have icons');\n                }\n\n                if (this.items[index].icon || hasState) {\n                    hasIcons = true;\n                }\n\n                if (this.items[index].items && this.items[index].items.length) {\n                    hasSubmenus = true;\n                }\n            }\n\n            var result = [];\n            if (hasIcons) {\n                result.push('has-icons');\n            }\n\n            if (hasSubmenus) {\n                result.push('has-submenus');","sourceCodeStart":10,"sourceCodeEnd":46,"githubUrl":"https://github.com/octobercms/october/blob/b608633a7e8922487d91a8161499020121c3b3bf/modules/backend/vuecomponents/dropdownmenu/assets/js/sheet.js#L10-L46","documentation":"The dropdown-menu sheet component validates its entire items array while computing the menu class name and throws if any checkbox or radiobutton item also carries an icon — the layout supports either a state glyph or an icon, not both. It is the render-time JavaScript counterpart of the PHP setIcon() guard and fires during render, before any user interaction.","triggerScenarios":"Mounting the dropdownmenu component (or opening a sheet menu) with items like {type:'checkbox', icon:'icon-grid', ...}; item objects passed from PHP as plain arrays that bypassed ItemDefinition validation, or assembled client-side.","commonSituations":"Custom code building menu item objects by hand instead of using ItemDefinition; config/API-driven menus where an icon field is present on every row; copying a template item with an icon and only changing its type to checkbox.","solutions":["Remove the icon property from every checkbox/radiobutton item in the items array.","Prefer the PHP ItemDefinition builder — its setIcon() guard stops the invalid combination server-side with a clearer trace.","Sanitize dynamic lists: strip icon when type is 'checkbox' or 'radiobutton' before passing them to the component."],"exampleFix":"// before\nitems: [\n    { type: 'checkbox', label: 'Show grid', icon: 'icon-grid', command: 'toggleGrid' }\n]\n\n// after\nitems: [\n    { type: 'checkbox', label: 'Show grid', command: 'toggleGrid' }\n]","handlingStrategy":"validation","validationCode":"function sanitizeMenuItems(items) {\n    return items.map(function (item) {\n        var stateful = item.type === 'checkbox' || item.type === 'radiobutton';\n        if (stateful && item.icon) {\n            return Object.assign({}, item, { icon: null });\n        }\n        return item;\n    });\n}\n\n// bind :items=\"sanitizeMenuItems(rawItems)\"","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Never pass raw API rows straight into the menu component","Strip icon for stateful item types at the data boundary","Use ItemDefinition server-side so the invalid pair never reaches the browser"],"tags":["vue","dropdown-menu","icon","config-conflict","frontend"],"backgroundTag":"invalid-config-combination","analyzedSha":"b608633a7e8922487d91a8161499020121c3b3bf","analyzedAt":"2026-08-21T04:24:57.515Z","schemaVersion":2},"datasetVersion":"2026-08-21T11:28:35.574Z"}