MudBlazor: MudTabs.ActivatePanel cannot activate a previously disabled tab on first try after tab becomes enabled
Common scenario: we want to keep the next tab disabled till a “Next” button is clicked (validate current tab before proceeding etc), at which point we switch to (activate) the second tab.
Please see this in action on TryMudBlazor: https://try.mudblazor.com/snippet/cawPkSQcWarSltPS
As you can see, after button click, we enable a previously disabled tab, which does take effect as shown in UI, but the following tab activation action does not work. Instead, we have to click the button again, this time it works.
I tried adding StateHasChanged and it made no difference. I also tried the other methods of activation (by ref, by ID) which also made no difference.
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 15 (10 by maintainers)
That’s not a bug with MudBlazor, it’s a bug in your code. You are changing a local property, a value type nonetheless, that doesn’t magically changes the Disabled attribute on your tab. I’m on my phone and I can’t give you the code because try.mudblazor editor doesn’t work with my keyboard (or at least, it works but I can’t delete…) But basically add a reference to your second tab too (@ref=“tab2”) and change directly
tab2.Disabled = falseand then it will work.How you are doing it requires a render cycle to first update the Disabled property, and then you can jump.
Anyway, I managed to edit the example anyway, ignore the “ytab2”, as I said I can’t delete 😛 https://try.mudblazor.com/snippet/mOcPuowQMxfmQPeC
I use the same approach in a project I work on. I created a very premature wizard component with the MudTab component. It used to set the
Disabledproperty on the MudTabPabel likeAnd I didn’t get any issues so far. However, I like @felinepc’s idea of overloading the existing activation methods to activate a disabled tab explicit. Currently, it is not possible.
But it should be easy to implement. I start working on it now.