Deactivate an Activated Button
Hi, I am using metronic theme with blazor webapp dotnet 9. I have this code:
@foreach (var parking in Parkings ??= [])
{
<button type="button"
class="btn btn-lg btn-light-primary @(parking.IsActive ? "active" : "") w-100 mb-3"
@onclick="() => { parking.IsActive = !parking.IsActive; }">
@parking.Name
</button>
}the problem is that when I click on the button, It gets active class and when I click again, the active class will remove. but after the removal of active class, the button style remains active (Full Primary Blue) until i click anywhere else on the screen.
I tried
1- jquery
addClass and removeClass2- bootstrap :
const button = bootstrap.Button.getOrCreateInstance(buttonElement)
button.toggle()3- use
data-bs-toggle of bootstrap4- calling
StateHasChanged();none of them worked. button stays in active style until click somewhere else. I mean for example this button has
btn-light-primary class and as you know, It is by default, a light blue button but after the active class added to element, It is like a button with class btn-primary and it stays in that color or style format until I click on screen so It knows to render the button and show the correct style
Replies (3)
Hi,
Thank you for reaching out to us.
This is an expected behavior, clicking button activates button active state and active state is selected in styles to override button default color.
.primary:active:not(.btn-active) {
color: var(--bs-primary-inverse);
border-color: var(--bs-primary-active);
background-color: var(--bs-primary-active)
}If you want manually handle button active state you can use
btn-active class.Regards,
Lauris Stepanovs,
Keenthemes Support Team
thank you,
as you said, I changed my code to manually add and remove btn-active class but now it doesn't even activate the active style!
current code:
<button type="button"
class="btn btn-lg btn-light-primary @(parking.IsActive ? "btn-active" : "") w-100 mb-3"
@onclick="() => ToggleParking(parking)">
@parking.Name
</button>here is the video to see new code effect (
btn-active class):video
and here is the effect of
active class:video2
Hi Ali,
Other solution you can try is manually remove the active state in your button click handler.
JS.InvokeVoidAsync("eval", "document.activeElement?.blur()");Regards,
Lauris Stepanovs,
Keenthemes Support Team
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
