how to remove outline just from click, not removing from keyboard navigation-CodePudding

I have a class in which I apply the outline on the click, and I would like to remove it only from the click and not from the keyboard navigation (tab), with keyboard navigation the outline should remain.

.po-radio-focus label {
  outline-color: var(--color-radio-group-border-color-focusable, var(--outline-color-focused));

  outline-width: var(--border-width-lg);
  outline-style: solid;
  outline-offset: 2px;
}

enter image description here

CodePudding user response：

This is precisely what :focus-visible is for:

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

CodePudding user response：

I found a solution to remove the outline just from the click and not from the keyboard navigation.

  @HostListener('focusout', ['$event.target'])
  focusOut(): void {
    this.renderer.removeClass(this.radio.nativeElement, 'po-radio-focus')
  }

  @HostListener('keyup', ['$event.target'])
  onKeyup(): void {
    this.renderer.addClass(this.radio.nativeElement, 'po-radio-focus');
  }

  @HostListener('document:keydown', ['$event.target'])
  onKeydown(): void {
    this.renderer.addClass(this.radio.nativeElement, 'po-radio-focus');
  }