Material-components-web: mdc-select with preselection in Aurelia

[JordyvA]

I've a question about the mdc-select component. We're using Aurelia for binding purposes with the mdc components. With the normal HTML5 approach, we can use this:

<select value.bind="selectedPersonID" class="mdc-select mdc-list-item__end-detail">
  <option model.bind="null">Select person</option>
  <option repeat.for="person of Persons" model.bind="person.ID">${person.Name}</option>
</select>

We've only the "selected item" as PersonID available. This approach works with the "init" (it shows the selected person with the name).

With mdc-select, the approach is a little different because there is a span. The next code is for the mdc-select.

<div mdc-select role="listbox" class="mdc-select mdc-list-item__end-detail">
  <span class="mdc-select__selected-text">????</span>
  <div class="mdc-simple-menu mdc-select__menu">
    <ul class="mdc-list mdc-simple-menu__items">
      <li class="mdc-list-item" role="option" repeat.for="person of Persons" model.bind="person.ID">${person.Name}</li>
    </ul>
  </div>
</div>

We've got a "selectedPersonId" for the selected person. I can also put the aria-selected property on the right "li-tag" (not in the code). That works like a charm when clicking the list open (it's selected). But on init it won't show on the question marks.

My question is: How can i preselect an item in the mdc-select with only the "PersonId" available, so that the span is also filled with the chosen Person.Name. Is it possible to dynamically change the "span" tag with the chosen aria-selected or something?

Thanks a lot! Keep up the good work!

[Thanood]

Hey @jordyboytjuh,

I think you would need to use the foundation classes (to track selection changes) and create an Aurelia custom element from there.
It might be helpful to look at tranrate/aurelia-mdc.

[teoxoy]

You can do it using the MDCSelect object in js. At the end of the function attached() you should set the property selectedIndex to the index you want.
Example: this.mdcSelect.selectedIndex = index;

[JordyvA]

Thanks for the answers. I'm preferring the solution of Teoxoy the most. The only problem is when I want to set the index in the attached function, that my index is still 'undefined'. I think the problem here is the Aurelia framework. When I give the currentIndex to the mdc-select, it's not loaded in the attached. When putting a "hack" timeOut in the attached function, it worked well. I will dive in the Aurelia loading. Thanks for the answer!

[Thanood]

@jordyboytjuh using the taskQueue could probably help. 😃

[JordyvA]

@Thanood Thanks for the reply. I've tried the queueTask as well, this one works for about 80 percent. It seems that it's not always the last task, so sometimes (20 percent) it's still showing the default. Maybe because of the use of custom attributes / options.

[yeelan0319]

Thanks for everyone's contribution to this. Based on what mentioned in Aurelia's documentation, it sounds like accessing the DOM after attached should work fine. @jordyboytjuh , if it continues not work on your end, how about asking what Aurelia did after the attached method in their project or use stackover to see if anyone have ever encountered a similar life-cycle hook problem?

[JordyvA]

@yeelan0319 , thanks for the answer. I think I've to move towards Aurelia on this one. The preselection of the MDC-select works fine with static data as mentioned by @Teoxoy . The problem is that the dynamic data in Aurelia is not finished in the attached() method or something. I will dig into the life-cycle of Aurelia a bit more. If I find the answer, I will share it here.
Thanks for the support here!

[teoxoy]

@jordyboytjuh are you using the @bindable decorator on the variables ?

[JordyvA]

Yes, I'm using that as well. I think it's because of the not-loaded data which we're receiving out of our back-end with a business service. That data is not loaded completely on the attached method. When I set some console logs, the life cycle shows the following:

Function | Value of selectedPersonID
constructor null
bind undefined
attached undefined
bind 168631

I get this output for about 90% of the times I'm refreshing. I don't really understand why the bind is called 2 times. The personID on that bind is the right one, but on the bind, my MDCSelect is not filled with options (that happens between the bind and attached method in the HTML).

The other 10%, my default selection is working. The console looks like:

constructor null
bind 168631
attached 168631

This is the expected behavior. I'm trying to make a "plunker" with the issue, but it's tricky about the "business service" part.

[teoxoy]

Oh, you are waiting for the server to respond with the needed data. I guess that 10% of the time the server responds fast enough to bind that variable and the other 90% its too slow and happends after the attached function was called. You might want to take a look at this https://github.com/aurelia/framework/issues/367.
The attached function will get called when you are done receiving information from the server.
Hope this helps.

[JordyvA]

Yeah, I just figured that out, that it's the serverdata that causes the problem. The difficulty is that I want to make a custom "global" attribute (the selectbox) with only an option as parameter (the preselected ID). This preselected ID can come from the server. I thought in the first place that I can make a preselectedChanged() function, and that it will trigger when the value is available, but it doesn't. I will look into the CompositionTransaction mentioned in above topic. Thanks for the response!

[yeelan0319]

I am going to close this issue since it is no longer a MDC question, but feel free to paste the answer in the following thread. @jordyboytjuh