lundi 26 juin 2023

Nebular checkbox is considered checked but doesn't light up

I'm working on an Angular component in which there are Nebular checkboxes.

When I click on any checkbox for the first time, the click event is registered and the action associated to it is performed. However, the checkbox doesn't light up.

Here is the code for the HTML and TS involving this checkbox as well as screenshots of the issue. enter image description here enter image description here

In the first image, I clicked on the checkbox (originally "false" was displayed next to it), and the text became "true" (this is the expected behaviour).

In the second image, you can see the generated HTML with "ng-reflect-checked" set at "true", which is another sign that the checkbox is considered checked.

And now the code for the HTML and relevent fonctions :

<nb-checkbox *ngIf="globalSettings.showMultipleSelection" class="list-checkbox clickable" (click)="toggleSelectedItem(item, $event)"
                             [checked]="itemSelected( item )" ></nb-checkbox>
itemSelected( item ) {
    const key = this.utilsService. getObjectValue( item, this.globalSettings.multipleSelectionKey )
    return (this.selectedItems.findIndex( ( elem ) => elem === key ) >= 0)
  }

toggleSelectedItem(item, $event ) {
    const key = this.utilsService.getObjectValue( item, this.globalSettings.multipleSelectionKey )
    const tmpIndex = this.selectedItems.findIndex( ( elem ) => elem === key )
    $event.stopPropagation()
    if ( tmpIndex >= 0 ) {
      this.selectedItems.splice( tmpIndex, 1 )
      this.emitSelectedItems( 'remove', [ key ]  )

    } else {
      this.selectedItems.push( key )
      this.emitSelectedItems( 'add', [ key ]  )

    }
    this.selectedItems = JSON.parse( JSON.stringify( this.selectedItems ) )
    this.onSelectedItemChange()
  }

In our case, the itemSelected function sends true when the item is in an array called "selectedItems" and false otherwise. toggleSelectedItem adds or removes the item from the array.

Once again, the code does work properly and has the expected behaviour, and the only issue is the checkbox that doesn't light up.

I've checked if there was any CSS that conflicted with my checkbox, but there wasn't. I also removed the (onRowClick) to see if it wasn't an event order issue, and it still didn't light up. I've also tried tinkering with the TS and HTML, but nothing worked.

Thanks in advance for your help !




Aucun commentaire:

Enregistrer un commentaire