First Override this file in your custom module
vendor/magento/module-ui/view/base/web/js/form/element/ui-select.js
Modify the toggleOptionSelected function to select parent category.
toggleOptionSelected: function (data) {
var isSelected = this.isSelected(data.value);
if (this.lastSelectable && data.hasOwnProperty(this.separator)) {
return this;
}
if (!this.multiple) {
if (!isSelected) {
this.value(data.value);
}
this.listVisible(false);
} else {
if (!isSelected) { /*eslint no-lonely-if: 0*/
this.value.push(data.value);
/* to add current category and callled recursive function for selecting parent category*/
$.each(data.optgroup, function( key, value ) {
self.value.push(value.value);
if (typeof value.optgroup !== 'undefined') {
self.childToParentIterate(value,'add');
}
});
if (typeof data.optgroup === 'undefined') {
self.childToParentIterate(data,'add');
}
} else {
this.value(_.without(this.value(), data.value));
}
}
return this;
}
Added new functions to check the parent category.
childToParentIterate: function(data, op){
var self = this;
var path = data.path;
var level = data.level;
$.each(this.cacheOptions.tree, function( key, value ) {
var optgroup = value.optgroup;
/*if you have your root level category with other label then change this label "Default Category" in below condition */
if(value.label == "Default Category"){
$.each(optgroup, function( optkey,optval ) {
var label = optval.label;
if(path.indexOf(label) != -1){
if(op == "add") self.value.push(optval.value);
}
self.childIteration(optval,op,level,path);
});
}
});
}
childIteration: function(data, op,level,path){
var self = this;
if(data.level < level){
var optgroup = data.optgroup;
$.each(optgroup, function( optkey,optval ) {
var label = optval.label;
if(path.indexOf(label) != -1){
if(op == "add") self.value.push(optval.value);
}
self.childIteration(optval,op,level,path);
});
}
}
web/js/form/element/ui-select.js
js and modify that according to your need.this
objects by which you can select/unselect categories.