Issue when setting option values via function

[MasterPuffin]

Hello,
I found another issue:
I have an object where I use one value for a select field. When the value is set to null and initializing sprae, the dropdown is empty. When I now set the available values to an empty array and then push entries to the available values via a function, now the dropdown has selected a value. However if I now read from the original object the value set by the dropdown is still null.

Please see the following example code to reproduce this issue

<div id="container">
  <select
          :value="object.defaultmode">
    <option :each="option in options"
            :value="option.uid"
            :text="option.name"></option>
  </select>
    <button :onclick="()=>{toggle()}">Toggle</button>
    <button :onclick="()=>{dump()}">Dump</button>
</div>

const defaultOptions = [
    {uid: '1', name: 'Option 1'},
    {uid: '2', name: 'Option 2'}

]

const container = document.querySelector('#container')

const state = sprae(container, {
    options: defaultOptions,
    object: {defaultmode: null},
    toggle() {
        if (state.options.length > 0) {
            state.options = []
        } else {
            state.options = defaultOptions
        }
    },
    dump() {
        console.log(JSON.parse(JSON.stringify(state.object)))
    }
})

[dy]

Thanks for the catch @MasterPuffin. Please try v11.0.3 - it must be fixed there.

Unfortunately I cannot see more reliable workaround than mutation observer. It's specific case of selects - they automatically change own value if children added/changed/removed, and no input/change event is produced, so that's something outside of sprae scope.

Watch out: state gets updated in a tick.

[MasterPuffin]

The issue is fixed wirh 11.0.3.
However I want to have the select blank after the change. I wrote the following function to do this

(async () => {
    new Promise(resolve => setTimeout(resolve, 0));
    state.object.defaultmode = null
 })();

It has to be this complex, because, as you mentioned, the update happens after one tick.

[dy]

Have you tried without delay @MasterPuffin ? It should not force you to do that, it should just work.
The only limitation this imposes is that state.object.defaultmode is not immediately reflected when you change options like state.options = [] or state.options = defaultOptions

[MasterPuffin]

I just tested it again to make sure, but without the delay it doesn't work for me.

[dy]

Hmm, that's not a way to go. Is that the test-case above? Would you be able to write basic example when it fails? I will try to make it sync if that's indeed the cause.

[MasterPuffin]

I managed to reproduce the issue in a test case

<div id="container">
    <select class="form-control"
            :value="object.defaultmode">
        <option :each="option in getAvailableOperationmodes(object.operationmodes)"
                :value="option.uid"
                :text="option.name"></option>
    </select>
    <div :each="option in object.operationmodes">
        <button :onclick="()=>{toggle(option)}">Toggle <span :text="option.name"></span></button>
    </div>
    <button :onclick="()=>{dump()}">Dump</button>
</div>

const defaultOptions = [
    {
        "uid": "1",
        "name": "Test",
        "enabled": true,
    },
    {
        "uid": "2",
        "name": "Test 2",
        "enabled": true,
    }
]

const object = {
    "defaultmode": null,
    "operationmodes": defaultOptions
}

const container = document.querySelector('#container')

const state = sprae(container, {
    object: object,
    toggle(option) {
        option.enabled = !option.enabled;
        if (!object.defaultmode) {
            (async () => {
                await new Promise(resolve => setTimeout(resolve, 0));
                state.object.defaultmode = null
            })();
        }
    },
    dump() {
        console.log(JSON.parse(JSON.stringify(state.object)))
    },
    getAvailableOperationmodes(objects) {
        return objects.filter(o => {
            return o.enabled
        })
    }
})

I use the latest sprae.umd.min.js without any other code, if that matters.

[dy]

Can you elaborate this part:

if (!object.defaultmode) {
            (async () => {
                await new Promise(resolve => setTimeout(resolve, 0));
                state.object.defaultmode = null
            })();
        }

What are you trying to achieve/test here? Normally it's supposed object to be only passed to sprae once and forgotten, instead work with state.object.
I played around with your example - and besides this part it works as expected. I want to understand where the struggle is.

Also - I've updated to v11.0.4 with better mutation observer init order, IDK if it will make difference but you can test.

[MasterPuffin]

Sorry for the late reply.
My goal is, that if there is no entry selected in the dropdown, when toggling an option, there should be still no entry selected in the dropdown.
This example works as intended, however it is a workaround. When there is no entry selected and an option is toggled, the selected option is set to null again.

toggle(option) {
        option.enabled = !option.enabled;
        if (!state.object.defaultmode) {
            (async () => {
                await new Promise(resolve => setTimeout(resolve, 0));
                state.object.defaultmode = null
            })();
        }
    },

However the following code should also work to reset the selected option back to null. This is not the case.

toggle(option) {
        option.enabled = !option.enabled;
        if (!state.object.defaultmode) {
             state.object.defaultmode = null
        }
    },

[dy]

However the following code should also work

What I can see in reproduction, both your snippets work identical on my side, there's no need for async wrapper.

Please tell me if I understand your issue right.

If we don't have this guard condition:

if (!state.object.defaultmode) state.object.defaultmode = null

then when you toggle/remove an item from the options list, it automatically selects the first available option, even if that was selection was null (unselected). So you would prefer to keep selected item empty when we modify options, right?

In other words, you don't want to have this line if (!state.object.defaultmode) state.object.defaultmode = null at all, right?

[MasterPuffin]

then when you toggle/remove an item from the options list, it automatically selects the first available option, even if that was selection was null (unselected). So you would prefer to keep selected item empty when we modify options, right?

Yes, that's exactly what I'm trying to achieve, when no option is selected, after adding or removing items, there should be still no option selected.

[dy]

So it means preserving selected option if list of options changes, even if new list doesn't include that.

By default HTMLSelect selects first available option whenever it's available. Right now we follow that behaviour: when you add an option, select goes from null to first option. When you delete an option, select goes to next available option. When you delete all options it resets selection to null.

It seems risky to attempt to rewrite default HTML behaviour.

I think what you're doing with if (!state.object.defaultmode) state.object.defaultmode = null is not a workaround but actual piece of logic that you need in your app, since it redefines select behavior.

Please reopen if you find it an issue.