:focus is not getting removed if i navigate back

Question

I have a child component which has several tabs with the following CSS property:

a {
    padding: 7px 14px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    &:hover,
    &:focus {
      background-color: pink;
      border-bottom: 2px solid red;
    }
}

When I click on back button it goes back to the previous selected tab which is fine but the focus is not removed from the current one unless I click on any other part of the screen.

How to remove the focus?

This can't be done with CSS. You could do it with JS though. — Wimanicesir, Mar 17 '21 at 12:58
Maybe this answer (jQuery) can help you: https://stackoverflow.com/a/37257828/5641669 — Johannes, Mar 17 '21 at 13:58
@alia Please check my code and let me know does it serve your purpose or not. Best wishes. :-) — Srijon Chakraborty, Mar 17 '21 at 14:19

score 0 · Answer 1 · answered Mar 17 '21 at 14:18

I think, I have a different solution for that you can set your on navigate back using document and id. Here is a sample code below=>
HTML:

<input id="abc">
<button (click)="mySetDefaultFocus()">Set Focus</button>

TS:

 mySetDefaultFocus(){
     document.getElementById(`abc`).focus();
  }

Note: You can call that method mySetDefaultFocus on navigate change or ngInit.

:focus is not getting removed if i navigate back

1 Answers1