Nebular checkbox is considered checked but doesn't light up

Question

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.

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 )" >{{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 !

Answer 1

The solution to this issue was that I didn't use the correct event in the nb-checkbox. I should have used (checkedChange)="toggleSelectedItem(item, $event)" instead of (click)="toggleSelectedItem(item, $event)".

My understanding : that's because the event "click" is triggered after you click in the zone occupied by the element (in our case, the nb-checkbox). So, the first time, you don't actually click on the checkbox but rather on the page at the position of the checkbox. "checkedChange", however, is specific to checkboxes.

If someone finds a problem in my answer, please tell me. After all, it's just my speculations.