Multiple selects, second select changes value of the first

[vonnnassau]

Hi Tom,

When adding a second Select with v-model to a panel, the second select value changes the first one when a value is being selected by the user.

Steps to reproduce:

1. set first select to 'test 2'
2. then select in the second 'test 4'
3. see how the the first one changes back to 'test 1'
4. select the first one to 'test 2' and it keeps on selecting 'test 1'

Same behaviour in the example in the docs, so not sure if I'm just missing something here.

Thank you, Erik

  <Select
    label="v-model binding"
    v-model="activeValueOne"
    :items="['test 1', 'test 2']"
  />

  <Select
    label="v-model binding"
    v-model="activeValueTwo"
    :items="['test 3', 'test 4']"
  />

<Anno>{{ `Active value above is ${activeValueOne}` }}</Anno>
<Anno>{{ `Active value above is ${activeValueTwo}` }}</Anno>

data: () => ({
    activeValueOne: 0,
    activeValueTwo: 0
)}

[Inventsable]

Hi Erik, I don't see this behavior in the docs. May be possible that behavior changes depending on OS? I'm on Windows 10 myself. I've made a sample panel to isolate this with the code below for you to check out, try the following and let me know if this behavior still exists:

# First ensure brutalism is up to date
npm i brutalism@latest

In App.vue itself:

<template>
  <div id="app">
    <Menus refresh debug />
    <Panel>
      <select label="Foo" :items="fooItems" v-model="fooModel" />
      <select label="Bar" :items="barItems" v-model="barModel" />
      <select label="Doe" :items="doeItems" v-model="doeModel" />
      <Divider alt />
      <Anno>{{ `Foo: ${fooModel}` }}</Anno>
      <Anno>{{ `Bar: ${barModel}` }}</Anno>
      <Anno>{{ `Doe: ${doeModel}` }}</Anno>
    </Panel>
  </div>
</template>

<script>
  export default {
    data: () => ({
      fooItems: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
      fooModel: "0",
      barItems: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
      barModel: "0",
      doeItems: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
      doeModel: "0",
    }),
  };
</script>

Of note, <Select /> sometimes works best with a string v-model as I do above. I believe string indices are also supported -- ideally it would (and should, to be honest) be numeric indices as you're trying, but the root of this issue is likely some faulty logic with numeric indices if not a difference in OS. You could can probably mix @update return values in order to match numeric indices with string values within some given array if this is the case.

Let me know if the linked demo repository has the same behavior for you and we can go from there.

[vonnnassau]

HI Tom, great solution, this works as expected. Many thanks for taking time to explain. To get the indices I now use indexOf.

This is the behaviour I mentioned in the docs (10.15.7). Will look for a Windows machine to test when running into issues in the future.