onchange native form select

Topic: onchange native form select

baasjedave premium asked 11 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 10 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 free commented 10 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 11 months ago