Topic: Using mdb-checkbox inside a table causes performance issues
Expected behavior
On the one hand, we have a checkbox in the header of the table to offer the possibility of marking all data records in the table with one click and, on the other hand, we have a checkbox within each table row to be able to mark a specific data record.
We want to use the component mdb-checkbox.
Actual behavior
Using the component causes a runtime issue. It looks like browser is freezing and does not react for some time. Browser comes back - but response time is much too long.
Even if you click anywhere within a table row (i.e. on elements that actually do NOT represent any input field), browser is freezing for some time and makes scrolling, expanding the details, etc. impossible).
If we replace component mdb-checkbox (in table header and rows) by component input type = "checkbox" ..., the behavior is efficient as expected. Browser is NOT freezing anymore.
Please see html template and typescript class attached. Checkbox of the table header is in lines 95 + 96, checkbox of the table row is in lines 119 + 120.
You can simply switch between the two checkbox types to reproduce the behavior by commenting the other component.
Resources (screenshots, code snippets etc.)
html template
<mdb-card>
<mdb-card-header>
<div class="d-flex flex-row justify-content-between">
<div class="d-flex flex-row">
<div class="pl-5">
<a href="" class="pl-5 waves-light ml-0 mr-0" mdbWavesEffect> <!-- mdbTooltip="Zurück" -->
<mdb-icon fas icon="arrow-left" size="2x" class="roman-page-header"></mdb-icon></a>
</div>
</div>
<div class="d-flex flex-row roman-page-header">
<div class="d-flex flex-row align-items-end">
<mdb-icon fas icon="book-open" size="2x" class="pr-2"></mdb-icon>
<div>TEST</div>
</div>
</div>
<div class="d-flex flex-row">
<a class="pr-5 waves-light ml-0 mr-0" mdbWavesEffect> <!-- mdbTooltip="Speichern" -->
<mdb-icon fas icon="save" size="2x" class="roman-page-header" (click)="saveValues()"></mdb-icon></a>
<div class="pr-5"></div>
</div>
</div>
</mdb-card-header>
<mdb-card-body>
<mdb-card-text>
<div class="d-flex justify-content-around">
<div class="d-flex flex-column">
<h6 class="text-dark text-center">Filter</h6>
<div class="d-flex flex-row">
<a mdbBtn (click)="resetFilter()" floating="true" size="sm" gradient="aqua" mdbWavesEffect> <!-- mdbTooltip="Filter zurücksetzen" -->
<mdb-icon fas icon="undo"></mdb-icon></a>
<a mdbBtn (click)="getValues()" floating="true" size="sm" gradient="aqua" mdbWavesEffect> <!-- mdbTooltip="Abfrage ausführen" -->
<mdb-icon fas icon="check-circle"></mdb-icon></a>
</div>
</div>
<div class="d-flex align-items-center">
<mdb-select-2 style="width: 20.0rem;margin-top: 0.0rem; margin-bottom: 0.0rem;position: relative;" optionHeight="20" label="SelectDropDown" placeholder=" " [value]="filterLocation" (valueChange)="filterLocation=$event;">
<mdb-select-filter *ngIf="withSelectFilter"
value="searchText | async"
(inputChange)="searchText.next($event)">
</mdb-select-filter>
<mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
</mdb-select-2>
</div>
<div class="d-flex align-items-center">
<div class="d-flex flex-column">
<div class="switch green-white-switch">
<label>
<input type="checkbox" [checked]="filterOnOffSwitch01" (change)="filterOnOffSwitch01=$event.target.checked;">
<span class="lever"></span>OnOffSwitch01
</label>
</div>
<div class="switch green-white-switch">
<label>
<input type="checkbox" [checked]="filterOnOffSwitch02" (change)="filterOnOffSwitch02=$event.target.checked;">
<span class="lever"></span>OnOffSwitch02
</label>
</div>
</div>
</div>
</div>
</mdb-card-text>
<div class="text-center">
<mdb-spinner *ngIf="(!options)" spinnerType="big" spinnerColor="red" ></mdb-spinner>
<mdb-card-text *ngIf="(!options)">... Daten werden geladen, bitte noch ein wenig Geduld ...</mdb-card-text>
</div>
<div class="text-center">
<mdb-card-text *ngIf="(values && values.length == 0)">... Keine Daten ...</mdb-card-text>
</div>
<mdb-card-text *ngIf="(values && values.length > 0)">
<table mdbTable class="sticky-top" mdbTableScroll mdbTableEditor striped="true" small="true" scrollY="true" maxHeight="600" bordered="true" borderless="true" stickyHeader="true"
stickyHeaderBgColor="#24879d" stickyHeaderTextColor="#ffffff">
<!-- --------------------------------- Column width --------------------------------- -->
<col style="width:10%"> <!-- collapse -->
<col style="width:10%"> <!-- CheckBox -->
<col style="width:30%"> <!-- Remarks -->
<col style="width:10%"> <!-- OnOffSwitch -->
<col style="width:30%"> <!-- Date -->
<col style="width:10%"> <!-- FileIcon -->
<!-- -------------------------------- Table header -------------------------------- -->
<thead>
<tr class="text-center" style="color:red">
<th>
<span>
<a>
<mdb-icon *ngIf="! allDetailsShown" fas icon="chevron-up" (click)="changeDirectionOfChevrons();"></mdb-icon> <!-- mdbTooltip="Show" -->
<mdb-icon *ngIf="allDetailsShown" fas icon="chevron-down" (click)="changeDirectionOfChevrons();"></mdb-icon> <!-- mdbTooltip="Hide" -->
</a>
</span>
</th>
<th>
<mdb-checkbox [checked]="false" (change)="checkBoxHeaderClicked($event.checked);"></mdb-checkbox>
<!-- <input type="checkbox" value="true" [checked]="false" (change)="checkBoxHeaderClicked($event.target.checked);"> -->
</th>
<th>Remarks</th>
<th>OnOffSwitch</th>
<th>Date</th>
<th>FileIcon</th>
</tr>
</thead>
<!-- --------------------------------- Table body --------------------------------- -->
<tbody>
<ng-template ngFor let-val [ngForOf]="values" let-ix="index" [ngForTrackBy]="testNgForTrackBy">
<!-- -------------------------------- Table row --------------------------------- -->
<tr class="text-center">
<td>
<span>
<a>
<mdb-icon *ngIf="values[ix].detailShown" fas icon="chevron-down" (click)="changeDirectionOfChevron(ix);"></mdb-icon> <!-- mdbTooltip="Hide" -->
<mdb-icon *ngIf="!values[ix].detailShown" fas icon="chevron-up" (click)="changeDirectionOfChevron(ix); "></mdb-icon> <!-- mdbTooltip="Show" -->
</a>
</span>
</td>
<td>
<mdb-checkbox [checked]="valuesAuxiliaryCheckBox[ix]" (change)="valuesAuxiliaryCheckBox[ix]=$event.checked;"></mdb-checkbox>
<!-- <input type="checkbox" [checked]="valuesAuxiliaryCheckBox[ix]" (change)="valuesAuxiliaryCheckBox[ix]=$event.target.checked;"> -->
</td>
<td>
{{values[ix].remarks}}
</td>
<td>
<div class="switch green-white-switch">
<label>
<input type="checkbox" [checked]="values[ix].onOffSwitch01" (change)="updateValues($event, ix, 'onOffSwitch01', $event.target.checked);"/>
<span class="lever"></span>
</label>
</div>
</td>
<td>
{{values[ix].date01}}
</td>
<td>
<ng-container [ngSwitch]="valuesAuxiliaryFileIcon[ix]">
<span *ngSwitchCase="0">
<mdb-icon far icon="file-alt" class="grey-text" size="lg"></mdb-icon>
</span>
<span *ngSwitchCase="1">
<a><mdb-icon far icon="file-alt" class="text-success" size="lg"></mdb-icon></a>
</span>
<span *ngSwitchCase="2">
<a><mdb-icon far icon="file-alt" class="text-warning" size="lg"></mdb-icon></a>
</span>
<span *ngSwitchCase="3">
<a><mdb-icon far icon="file-alt" class="text-danger" size="lg"></mdb-icon></a>
</span>
<span *ngSwitchDefault>
<a><mdb-icon fas icon="file-alt" class="text-danger" size="lg"></mdb-icon></a>
</span>
</ng-container>
</td>
</tr>
<!-- -------------------------------- Table row --------------------------------- -->
<tr *ngIf="values[ix].detailShown">
<td></td>
<td></td>
<td colspan="4">
<mdb-tabset [buttonClass]="'classic-tabs rgba-yellow-light'" [contentClass]="'card'">
<!------------------------------------------------------------------ Panel 1 -->
<mdb-tab heading="Details 1" style="background-color:rgb(0, 204, 255)">
<div><label>Details 1</label></div>
<div class="mt-3 container-fluid">
<div class="row mb-3">
<div class="col">
<mdb-select-2 optionHeight="20" label="SelectDropDown01" [value]="values[ix].value01" (valueChange)="updateValues($event, ix, 'value01', $event);">
<mdb-select-filter *ngIf="withSelectFilter"
value="searchText | async"
(inputChange)="searchText.next($event)">
</mdb-select-filter>
<mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
</mdb-select-2>
</div>
<div class="col">
<mdb-select-2 optionHeight="20" label="SelectDropDown02" [value]="values[ix].value02" (valueChange)="updateValues($event, ix, 'value02', $event);">
<mdb-select-filter *ngIf="withSelectFilter"
value="searchText | async"
(inputChange)="searchText.next($event)">
</mdb-select-filter>
<mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
</mdb-select-2>
</div>
<div class="col">
<mdb-select-2 optionHeight="20" label="SelectDropDown03" [value]="values[ix].value03" (valueChange)="updateValues($event, ix, 'value03', $event);">
<mdb-select-filter *ngIf="withSelectFilter"
value="searchText | async"
(inputChange)="searchText.next($event)">
</mdb-select-filter>
<mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
</mdb-select-2>
</div>
<div class="col">
<mdb-select-2 optionHeight="20" label="SelectDropDown04" [value]="values[ix].value04" (valueChange)="updateValues($event, ix, 'value04', $event);">
<mdb-select-filter *ngIf="withSelectFilter"
value="searchText | async"
(inputChange)="searchText.next($event)">
</mdb-select-filter>
<mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
</mdb-select-2>
</div>
<div class="col">
<mdb-select-2 optionHeight="20" label="SelectDropDown05" [value]="values[ix].value05" (valueChange)="updateValues($event, ix, 'value05', $event);">
<mdb-select-filter *ngIf="withSelectFilter"
value="searchText | async"
(inputChange)="searchText.next($event)">
</mdb-select-filter>
<mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
</mdb-select-2>
</div>
</div>
<div class="row mb-3">
<div class="col"><div class="switch"><label>Bool01<input type="checkbox" [checked]="values[ix].bool01" (change)="updateValues($event, ix, 'bool01', $event.target.checked)"><span class="lever"></span></label></div></div>
<div class="col"><div class="switch"><label>Bool02<input type="checkbox" [checked]="values[ix].bool02" (change)="updateValues($event, ix, 'bool02', $event.target.checked)"><span class="lever"></span></label></div></div>
<div class="col"><div class="switch"><label>Bool03<input type="checkbox" [checked]="values[ix].bool03" (change)="updateValues($event, ix, 'bool03', $event.target.checked)"><span class="lever"></span></label></div></div>
<div class="col"><div class="switch"><label>Bool04<input type="checkbox" [checked]="values[ix].bool04" (change)="updateValues($event, ix, 'bool04', $event.target.checked)"><span class="lever"></span></label></div></div>
<div class="col"><div class="switch"><label>Bool05<input type="checkbox" [checked]="values[ix].bool05" (change)="updateValues($event, ix, 'bool05', $event.target.checked)"><span class="lever"></span></label></div></div>
<div class="col"><div class="switch"><label>Bool06<input type="checkbox" [checked]="values[ix].bool06" (change)="updateValues($event, ix, 'bool06', $event.target.checked)"><span class="lever"></span></label></div></div>
<div class="col"><div class="switch"><label>Bool07<input type="checkbox" [checked]="values[ix].bool07" (change)="updateValues($event, ix, 'bool07', $event.target.checked)"><span class="lever"></span></label></div></div>
<div class="col"><div class="switch"><label>Bool08<input type="checkbox" [checked]="values[ix].bool08" (change)="updateValues($event, ix, 'bool08', $event.target.checked)"><span class="lever"></span></label></div></div>
<div class="col"><div class="switch"><label>Bool09<input type="checkbox" [checked]="values[ix].bool09" (change)="updateValues($event, ix, 'bool09', $event.target.checked)"><span class="lever"></span></label></div></div>
<div class="col"><div class="switch"><label>Bool10<input type="checkbox" [checked]="values[ix].bool10" (change)="updateValues($event, ix, 'bool10', $event.target.checked)"><span class="lever"></span></label></div></div>
</div>
<div class="row mb-3">
<div class="col"><mdb-date-picker [inline]="true" [openOnFocus]="false" [selDate]="values[ix].date01" (dateChanged)="updateValues($event, ix, 'date01', $event.actualDateFormatted)"></mdb-date-picker></div>
<div class="col"><mdb-date-picker [inline]="true" [openOnFocus]="false" [selDate]="values[ix].date02" (dateChanged)="updateValues($event, ix, 'date02', $event.actualDateFormatted)"></mdb-date-picker></div>
<div class="col"><mdb-date-picker [inline]="true" [openOnFocus]="false" [selDate]="values[ix].date03" (dateChanged)="updateValues($event, ix, 'date03', $event.actualDateFormatted)"></mdb-date-picker></div>
<div class="col"><mdb-date-picker [inline]="true" [openOnFocus]="false" [selDate]="values[ix].date04" (dateChanged)="updateValues($event, ix, 'date04', $event.actualDateFormatted)"></mdb-date-picker></div>
<div class="col"><mdb-date-picker [inline]="true" [openOnFocus]="false" [selDate]="values[ix].date05" (dateChanged)="updateValues($event, ix, 'date05', $event.actualDateFormatted)"></mdb-date-picker></div>
<div class="col"><mdb-date-picker [inline]="true" [openOnFocus]="false" [selDate]="values[ix].date06" (dateChanged)="updateValues($event, ix, 'date06', $event.actualDateFormatted)"></mdb-date-picker></div>
<div class="col"><mdb-date-picker [inline]="true" [openOnFocus]="false" [selDate]="values[ix].date07" (dateChanged)="updateValues($event, ix, 'date07', $event.actualDateFormatted)"></mdb-date-picker></div>
<div class="col"><mdb-date-picker [inline]="true" [openOnFocus]="false" [selDate]="values[ix].date08" (dateChanged)="updateValues($event, ix, 'date08', $event.actualDateFormatted)"></mdb-date-picker></div>
<div class="col"><mdb-date-picker [inline]="true" [openOnFocus]="false" [selDate]="values[ix].date09" (dateChanged)="updateValues($event, ix, 'date09', $event.actualDateFormatted)"></mdb-date-picker></div>
<div class="col"><mdb-date-picker [inline]="true" [openOnFocus]="false" [selDate]="values[ix].date10" (dateChanged)="updateValues($event, ix, 'date10', $event.actualDateFormatted)"></mdb-date-picker></div>
</div>
<div class="row mb-3">
<div class="col">
<div style="float:left; width:25%" class="md-form form-sm m-0 p-0">
<input mdbInput type="text" [value]="values[ix].numb01" (input)="updateValues($event, ix, 'numb01', $event.target.value)" class="form-control form-control-sm">
</div>
<div style="float:right" class="mt-2 w-75">
<div class="d-flex justify-content-start align-items-center my-0">
<span style="font-size:0.9rem" class="mr-2">{{0}}</span>
<form class="my-0 w-50">
<mdb-range-input [min]="0" [max]="999" id="numb01-1" [value]="values[ix].numb01" (input)="updateValues($event, ix, 'numb01', $event.target.value)"></mdb-range-input>
</form>
<span style="font-size:0.9rem" class="ml-2">{{999}}</span>
</div>
</div>
</div>
<div class="col">
<div style="float:left; width:25%" class="md-form form-sm m-0 p-0">
<input mdbInput type="text" [value]="values[ix].numb02" (input)="updateValues($event, ix, 'numb02', $event.target.value)" class="form-control form-control-sm">
</div>
<div style="float:right" class="mt-2 w-75">
<div class="d-flex justify-content-start align-items-center my-0">
<span style="font-size:0.9rem" class="mr-2">{{0}}</span>
<form class="my-0 w-50">
<mdb-range-input [min]="0" [max]="999" id="numb02-1" [value]="values[ix].numb02" (input)="updateValues($event, ix, 'numb02', $event.target.value)"></mdb-range-input>
</form>
<span style="font-size:0.9rem" class="ml-2">{{999}}</span>
</div>
</div>
</div>
<div class="col">
<div style="float:left; width:25%" class="md-form form-sm m-0 p-0">
<input mdbInput type="text" [value]="values[ix].numb03" (input)="updateValues($event, ix, 'numb03', $event.target.value)" class="form-control form-control-sm">
</div>
<div style="float:right" class="mt-2 w-75">
<div class="d-flex justify-content-start align-items-center my-0">
<span style="font-size:0.9rem" class="mr-2">{{0}}</span>
<form class="my-0 w-50">
<mdb-range-input [min]="0" [max]="999" id="numb03-1" [value]="values[ix].numb03" (input)="updateValues($event, ix, 'numb03', $event.target.value)"></mdb-range-input>
</form>
<span style="font-size:0.9rem" class="ml-2">{{999}}</span>
</div>
</div>
</div>
<div class="col">
<div style="float:left; width:25%" class="md-form form-sm m-0 p-0">
<input mdbInput type="text" [value]="values[ix].numb04" (input)="updateValues($event, ix, 'numb04', $event.target.value)" class="form-control form-control-sm">
</div>
<div style="float:right" class="mt-2 w-75">
<div class="d-flex justify-content-start align-items-center my-0">
<span style="font-size:0.9rem" class="mr-2">{{0}}</span>
<form class="my-0 w-50">
<mdb-range-input [min]="0" [max]="999" id="numb04-1" [value]="values[ix].numb04" (input)="updateValues($event, ix, 'numb04', $event.target.value)"></mdb-range-input>
</form>
<span style="font-size:0.9rem" class="ml-2">{{999}}</span>
</div>
</div>
</div>
<div class="col">
<div style="float:left; width:25%" class="md-form form-sm m-0 p-0">
<input mdbInput type="text" [value]="values[ix].numb05" (input)="updateValues($event, ix, 'numb05', $event.target.value)" class="form-control form-control-sm">
</div>
<div style="float:right" class="mt-2 w-75">
<div class="d-flex justify-content-start align-items-center my-0">
<span style="font-size:0.9rem" class="mr-2">{{0}}</span>
<form class="my-0 w-50">
<mdb-range-input [min]="0" [max]="999" id="numb05-1" [value]="values[ix].numb05" (input)="updateValues($event, ix, 'numb05', $event.target.value)"></mdb-range-input>
</form>
<span style="font-size:0.9rem" class="ml-2">{{999}}</span>
</div>
</div>
</div>
</div>
</div>
</mdb-tab>
<mdb-tab heading="Details 2" style="background-color:rgb(0, 255, 242)">
<div><label>Details 2</label></div>
</mdb-tab>
<mdb-tab heading="Details 3" style="background-color:rgb(51, 255, 0)">
<div><label>Details 3</label></div>
</mdb-tab>
<mdb-tab heading="Details 4" style="background-color:rgb(136, 248, 244)">
<div><label>Details 4</label></div>
</mdb-tab>
<mdb-tab heading="Details 5" style="background-color:rgb(6, 99, 96)">
<div><label>Details 5</label></div>
</mdb-tab>
</mdb-tabset>
</td>
</tr>
</ng-template>
</tbody>
</table>
</mdb-card-text>
</mdb-card-body>
</mdb-card>
typescript class
import { Component, OnInit } from '@angular/core';
import { MdbCheckboxChange, OptionList } from 'ng-uikit-pro-standard';
import { Subject, Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';
import { ILocationHeader } from 'src/app/models/interfaces/services/i-location-header';
import { LocationService } from 'src/app/services/location/location.service';
import { ISelectOption, SelectOptionFactory } from 'src/app/train/train-mdb-select/ISelectOption';
import { IValue, ValueFactory } from './IValue';
@Component({
selector: 'app-train-mdb-select',
templateUrl: './train-mdb-select.component.html',
styleUrls: ['./train-mdb-select.component.scss']
})
export class TrainMdbSelectComponent implements OnInit {
withSelects: boolean= true;
withSelectFilter: boolean= false;
withNgModel: boolean= false;
flatValue: boolean = false;
tableValue: boolean = true;
flatValue01 : number = 5;
flatValue02 : number = 10;
flatValue03 : number = 15;
filterOnOffSwitch01 : boolean = false;
filterOnOffSwitch02 : boolean = true;
filterLocation : ILocationHeader;
searchText = new Subject();
filteredOptions: Observable<any[]>;
values: IValue[];
valuesAuxiliaryFileIcon: number[] = [];
valuesAuxiliaryCheckBox: boolean[] = [];
options: ISelectOption[] = [];
allDetailsShown: boolean= false;
ngOnInit() {
for (let ix = 0; ix < 250; ix++) {
this.options[ix] = SelectOptionFactory.default();
this.options[ix].value = ix +1;
this.options[ix].label = `Option ${ix +1}`;
this.options[ix].description = `Description ${ix +1}`;
}
this.filteredOptions = this.searchText.pipe(
startWith(''),
map((value: string) => this.filter(value))
);
}
filter(value: string): any[] {
const filterValue = value.toLowerCase();
return this.options.filter((option: any) => option.label.toLowerCase().includes(filterValue));
}
changeDirectionOfChevron(ix: number) {
this.values[ix].detailShown = !this.values[ix].detailShown;
}
changeDirectionOfChevrons() {
this.allDetailsShown = !this.allDetailsShown;
this.values.forEach(val => {
val.detailShown = this.allDetailsShown; });
}
updateValues(event: any, ix: number, property: string, value: any) {
console.log('updateValues(), event: <' +event + '>');
console.log('ix: <' +ix +'>');
console.log('property: <' +property +'>');
console.log('value: <' +value + '>');
this.values[ix][property] = value;
//(<Event>event).stopImmediatePropagation();
//event.preventDefault();
//event.stopPropagation();
}
testNgForTrackBy(index: number, obj: any): any {
console.log('testNgForTrackBy(), index= <' +index +'>');
return false;
}
checkBoxHeaderClicked(event: any) {
console.log('CheckBox im Header gedrückt!');
console.log('event: <' +event +'>')
// this.valuesAuxiliaryCheckBox.forEach(item => {
// item= event; });
for (let ix = 0; ix < 200; ix++) {
this.valuesAuxiliaryCheckBox[ix]= event;
}
}
saveValues() {
console.log('Save-Button gedrückt!');
}
resetFilter() {
console.log('ResetFilter-Button gedrückt!');
}
getValues() {
console.log('GetValues-Button gedrückt!');
this.values= [];
for (let ix = 0; ix < 200; ix++) {
this.values[ix]= ValueFactory.default();
this.values[ix].value01 = (ix +1);
this.values[ix].value02 = (ix +1);
this.values[ix].value03 = (ix +1);
this.values[ix].value04 = (ix +1);
this.values[ix].value05 = (ix +1);
this.values[ix].remarks = `Remarks ${ix +1}`;
this.valuesAuxiliaryFileIcon[ix]= 1;
this.valuesAuxiliaryCheckBox[ix]= false;
}
}
}
sccs
.sticky-top {
z-index: 10
}
.switch.green-white-switch label input[type=checkbox]:checked + .lever {
background-color: #2ACC6C;
}
.switch.green-white-switch label input[type=checkbox]:checked + .lever:after {
background-color: #fff;
}
input[type=checkbox] {
opacity: 1;
pointer-events: all;
position: static;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 10.1.1
- Device: PC
- Browser: Chrome
- OS: Windows 7
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 3 years ago
@markusruderman
Thank you for reporting this issue. I think we already found the cause of the problem, but we still need some time to make additional tests and to find the best solution.
echmal free commented 1 year ago
Hi, has this problem been resolved?
Arkadiusz Idzikowski staff commented 1 year ago
This problem is not resolved, because in order to support current
mdb-checkboxfeatures, we need to use some listeners that may negatively affect performance if you use a lot of checkboxes in a specific application view. In v13.0.0 we added material checkbox styles to the global styles file. This change should allow you to render the component using standard HTML syntax: