Select component bug when set selected element using code.

Topic: Select component bug when set selected element using code.

vadim0426 free asked 4 years ago

Hi. I found bug in new version MDB (VUE) for Select component. I have tried to set selected element for Select component and I couldn't. But it worked before version 6.

The code I am trying to set:

this.$set(this.timeZone[0], 'selected', true);

As a result I see the placeholder was raised to the top like user chose something but there is no text in Select.

I made code inspection in browser and figured out that the value in the Input element doesn't exist if I try to set selected option via code. But if I try to set selected

timeZone: [
{
  value: "Etc/GMT+12",
  text: "(UTC-12:00) International Date Line West",
  selected: true
},

element in data source - the value for Input exists.

How can I resolve this issue until you fix it?

enviaya pro commented 4 years ago

Hi. Could you please help to resolve this issue? It's critical for production application. Thanks.

Add comment

Mikołaj Smoleński staff answered 4 years ago

1 0 Best answer

Please insert min. 20 characters.

Hi there,

Because Vue 2 is not recognizing all data changes the trick is to use sort method. Here's an example of select update in basicOptions array:

selectOption(key) {
  this.basicOptions.forEach(option => {
    option.selected = false;
  });

  this.$set(this.basicOptions[key], 'selected', true);
  this.basicOptions.sort();

}

You can find live demo here: https://vue.mdbootstrap.com/#/forms/pro/select

Please keep in mind that you have to mark all options as false first in single option select.

Best regards

enviaya pro commented 4 years ago

Thanks for the help, @Mikołaj Smoleński

Add comment