Deactivating Ui-router's ui-sref-active on root state on a nested configuration

Question

I have 2 buttons and both have ui-sref-active.

<a class="button" ui-sref-active="button-selected" ui-sref="main">
    <p>View patients</p>
</a>
<a class="button" ui-sref-active="button-selected" ui-sref="main.create">
    <p>Add patients</>
</a>

and css

.button-selected {
    color: #0000FF;
}

I'm wondering why when I click the 2nd button with the state "main.create", the class "button-selected" isn't removed from the first one. So the color #0000FF is still seen on the first button. Looks like "main" state is always active. Is it because it's the root state? What's the workaround?

Answer 1

The class is been added to both states because you should use ui-sref-active-eq instead of ui-sref-active.

<a class="button" ui-sref-active-eq="button-selected" ui-sref="main">
    <p>View patients</p>
</a>
<a class="button" ui-sref-active-eq="button-selected" ui-sref="main.create">
    <p>Add patients</>
</a>