I have a simple example featuring a few buttons displayed in a basic modular popup. I am curious about how the state changes from active to inactive as I don't see any visible change in my code.
Initially, I attempted to use custom JS to add an "active" class on click and remove it on the second click, but at least one button (the most recently clicked) stayed selected even without the "active" class being attached to it.
I have provided a code example on Codepen.io here, where those buttons behave differently compared to what is expected by default, right?
Please advise me on what I might be overlooking.
<button type="button" class="btn btn-outline-secondary w-100">1</button>
Update:
The default behavior of the buttons varies depending on whether in Desktop or Mobile view. You can test this on the Codepen example - in mobile view, the last clicked button remains "selected/dark" (with a color change and focus around it), while in desktop view, it instantly reverts back to white when the mouse moves away.
I am currently working on selecting multiple buttons by adding an active state - however, handling this mobile behavior poses a challenge because at least one button appears selected even without the "active" class being applied to it.
My question is, how can I make such a button appear normal again (like the unselected ones) programmatically?
In other words, while selecting multiple buttons doesn't seem to be an issue, I want to allow users to deselect buttons if they make a mistake, which is where the complication arises. Here is another link to the Codepen with the same example and some added JS functionality to add/remove the active class from buttons - try it out in mobile view here, attempt to select a few numbers and then deselect one or two.
Screenshot update upon request - in mobile view, button six may appear selected, but it was actually deselected and the .active class has been removed from it.