onchange native form select

Topic: onchange native form select

baasjedave premium asked 3 months ago

Expected behavior Dynamically change a select value natively for example by: document.getElementById('selectID').value = 4;

To avoid complete lock-in, it would be nice to have watchers from MDB looking at native onchange value events en update mdb select instance.

Actual behavior From the docs it says to dynamically change a dropdown value use: Select.getOrCreateInstance(this.element).setValue('4');

How would you tackle this one?

Add comment

baasjedave premium answered 2 months ago

0 0 Best answer

Please insert min. 20 characters.

We would like to change the value using vanilla JS, not using the instance of the MDB-select. When changing the value of the original select, it's change should be reflected to the MDB-select.

It seems like the changed value will be reflected when the selected option is the only option that isn't disabled.

The only way I can manage it, is using:

    const originalValueDescriptor = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, 'value');

    Object.defineProperty(HTMLSelectElement.prototype, 'value', {
    set: function(newValue) {
        originalValueDescriptor.set.call(this, newValue);
        if (this.hasAttribute('data-mdb-select-init')) {
            Select.getOrCreateInstance(this).setValue(newValue);
        }
    }
});

Grzegorz Bujański staff commented 2 months ago

Unfortunately, we do not support automatic updating of the MDB Select value after changing the value of the native Select. That's why we provide a method to change value.

We tested the possibility of adding an observer. Unfortunately, this caused performance issues. The browser crashed when select contained a lot of options.

Add comment

Kamila Pieńkowska staff answered 3 months ago