SelectItem not showing items!

[Simon-Miller]

I can't upgrade past MatBlazor 2.6.2 as the SelectItem component stops showing the items when clicked on. Worse, it works, and then doesn't! I know this sounds rediculous, so I'll explain: When I use a 'page' component, containing another component representing data details, and this component uses a number of SelectItem components to allow the user to view or edit specific data.

I'm using the Disabled parameter, and tend to use Outlined too (not that this makes a difference). When the component loads (in view-only mode) the component renders the selected option as I'd expect. I then click on a button that enables editing of all the details, and this changes the Disabled parameter to false, and the UI updates from the grey text to black, suggesting it is now editable.

When I click on the arrow icon or the text expecting the menu to "pop up", it works just fine! (as you'd expect). But selecting a different item from a list of details, which causes the detail component to revert back to view-only mode, and re-render all SelectItem component does update with the new data, and each SelectItem appears to be disabled as expected. This time, if I click on the button that enables editing of all the details, each SelectItem again go from grey to black suggesting they are editable, but..

When I click on the arrow icon or the text expecting the menu to "pop up", it does not. When I examine the HTML in my browser's dev tools, I can see classes being added and removed, which are associated with the animation - but nothing appears.

Frustratingly, if I literally copy and paste the same code from within the component I'm developing, to a top-level page component, it appears to work. So there's something odd about it. I blamed my code, and blamed possible CSS changes on my part - and went to the extreme of not loading any of my own CSS, so only MatBlazor's CSS comes through to the page. This made no difference.

To resolve this issue, I went back in time in source control, until I found a point where it was working - and worked forwards to the point it was not. I resolved the change to an upgraded NuGet package for MatBlazor. So when I regressed MatBlazor back to v2.6.2, it all of a sudden worked again.

So I'm not able to upgrade :-(

[Christian-Oleson]

Hello @Simon-Miller ,

First off, thanks for using MatBlazor! I find this report interesting, as I'm using nested components within a page and the SelectItem component in the nested component. I'm using MatBlazor 2.8, and have no issues.

You mention this is related to a package upgrade. Which package do you believe to be the culprit? Likewise, a Blazor fiddle link would be helpful or sample project with the issue to replicate the problem would be great. Especially since I have working code with this component in 2.8. Then we can find the offending code and resolve.

Thanks!

[Simon-Miller]

It is very odd, I agree. Any version after 2.6.2 up to the current version. So 2.8 won't work for me either. I've two places where this happens, and both are deeply nested. One inside a MatAccordion -> MatExpansionPanel -> MatExpansionPanelDetails, and the other is a custom component of our own design.

If I find a bit of time today to try and isolate the problem, and can replicate it in a BlazorFiddle, I'll do that. Otherwise, you're stuck with looking at the differences between current version and 2.6.2 release version. If you head over to the Gitter chat, and search for 'SelectItem' you'll see someone else had this issue, but never raised a ticket.

[Simon-Miller]

I've got code that fails (see below) but I couldn't get the same code to fail in a BlazorFiddle.
So I'm wondering if this bug affects Server-side Blazor only. In my current project (server side Blazor) I created a test page, that fails. I've extracted approximations of objects, etc, so this isn't exactly production code! It's worth noting the time-order of things here.

Component initializes, and the 'projectDistricts' populates. I've actually got dependency injection providing something that provides the real values etc - hence the need to approximate behaviours. This happens after the component first initializes, but in theory, before the component first renders. So 'projectDistricts' will initially point to null, but after parameters set should point to actual data.

Note also, that 'this.selectedDistrict' gets set in 'OnParametersSet' BEFORE the 'projectDistricts' does. This may be significant. It might not. Note also that initially the SelectItem will be disabled as the 'options.Enabled' will be false by default.

When the checkbox is clicked, the bi-directional binding of Blazor recognises that the SelectItem will need to be re-rendered, as evidenced by the SelectItem being black where before it appeared grey.

Now when clicking on the SelectItem, I see nothing at all appearing on screen. If I down-grade to MatBlazor 2.6.2, it works! That's about as close as I can get to it for you. Really hope this helps.

I tried pasting code, and even using the 'insert code' button, but it tries to format , and do all kinds of odd things. So I've made a zip of the razor file, which should be attached.

Test.zip

[Simon-Miller]

MatBlazor.ServerApp Test.zip

I've simplified it further, and decided to include a full visual studio project. So out-of-the-box Blazor (server) project, with the index page "/" loading up shows two MatSelects: One is a MatSelectValue, and the other a MatSelectItem (my preferred). There is a checkbox on screen binding to a private bool 'disabled'. When clicked on, Blazor re-renders the 'MatSelects'. Both appear to become enabled. But they don't work.

this is MatBlazor 2.7.0-develop-017. Earlier versions work. Most up-to-date 2.8 does not. As I included MatBlazor as a NuGet package, it's very easy to switch versions.

[AlexanderZender]

I made a similar observation using the BlazorBoilerplate project. It is somehow related to Blazor running in WASM.

When BlazorBoilerplate is executed in Server mode, MatSelectValue works fine:

If BlazorBoilerplate is executed in WASM, MatSelectValue works fine too except it doesn't display the currently selected item:

[jeisonjei]

I have the same issue - after changing Disable property from 'true' to 'false' nothing happens when clicking on the arrow - list with items doesn't appears