Bad UX for Checkbox Button on mobile browser

[Juchar]

Bug description:

Using the checkbox buttons on a mobile browser (Chrome Browser 67.0.3396.87 on Android) if you uncheck/check a button it will not show the proper styling as it seems to be still hovered.

This is resulting in really bad UX due to the fact that for the overall user the button still seems to be unchecked.

You can see in the below screenshot the most right button is checked, but still showing the unchecked styling:

Link to minimally-working plunker that reproduces the issue:

You can check this by simply accessing the demo here using a mobile browser:
https://ng-bootstrap.github.io/#/components/accordion/examples

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 6.0.6
ng-bootstrap: 2.1.2
Bootstrap: 4.1.0

[Juchar]

By the way: from my point of view this is also confusing people on the desktop browser, especially when using the btn-outline style I assume the people would expect the button to be instantly not filled after clicking it and not after having to move the mouse away first.

[pkozlowski-opensource]

This is resulting in really bad UX due to the fact that for the overall user the button still seems to be unchecked.

Totally agree! Unfortunately this is what we've got from Bootstrap CSS, you can see the same behaviour in the Bootstrap demo site: http://getbootstrap.com/docs/4.1/components/buttons/#checkbox-and-radio-buttons

This steams from the fact that Bootstrap adds darker background for buttons that are focused. I agree with you that there should be more pronounced difference between checked / unchecked and hoovered.

Would you mind opening an issue in https://github.com/twbs/bootstrap/issues ?

[Juchar]

@pkozlowski-opensource Done, I created the issue #26804.

[Juchar]

I have implemented a workaround that might be useful for others struggling with this.

Directive

@Directive({
  selector: "[ngbCheckboxButtonLabel]"
})
export class NgbCheckBoxButtonLabelDirective {

  private nativeElement: any;

  constructor(private renderer: Renderer2, private  elementRef: ElementRef) {
    this.nativeElement = this.elementRef.nativeElement;
  }

  @HostListener("click")
  onClick() {
    this.renderer.addClass(this.nativeElement, "clicked");
  }

  @HostListener("mouseleave")
  onMouseLeave() {
    this.renderer.removeClass(this.nativeElement, "clicked");
  }
}

SCSS

/* Custom adaptations for existing elements in (ng-)bootstrap. */
@import '../../node_modules/bootstrap/scss/functions';

@each $color, $value in $theme-colors {
  .btn-outline-#{$color}.clicked:not(.active) {
    color: $value;
    background: transparent none;
  }

  .btn-#{$color}.clicked:not(.active) {
    color: color-yiq($value);
    @include gradient-bg($value);
    border-color: $value;
  }
}

Usage

<label class="btn btn-outline-primary" ngbButtonLabel ngbCheckboxButtonLabel>
    <input type="checkbox" ngbButton>Button
</label>

What happens

The clicked style gets applied to the button after a click as long as the mouse does not leave it and the according styling is applied. As soon as the user once left the button, the clicked style gets removed and the hover style is applied again to the button on hovering.

[uptownjimmy]

I just ran into this issue as well. Vexing. The problem isn't just a focus outline issue: on mobile it stays the same "selected" color and doesn't return to the default color until you touch elsewhere on the screen.

[maxokorokov]

Buttons were removed in v13 → https://ng-bootstrap.github.io/releases/12.x/#/components/buttons/overview