webdevnerdstuff/vuetify-inline-fields

[Bug]: VInlineSelect is changing reactive value from null to empty string on mount

DaanVervacke opened this issue · 1 comments

Bug description

I'm passing a prop called 'item' to a separate component containing a VInlineSelect.

Some of the fields inside this prop are null by default (default value in my database is null).

When passing this prop the the VInlineSelect component, the value of the field I'm using inside the component is changed from null to an empty string (on mount).

Resulting in watchers and @update:modelValue getting triggered on mount, when the value isn't actually getting changed by the user.

This (as far is I know) not the default behavior of the v-select component.

Steps to reproduce

  1. Create a component with a VInlineSelect element.
  2. Pass a prop to the component (in my case: an object with various fields that can be null)
  3. Use the item prop with the VInlineSelect element.
  4. Add a watcher to item prop or to a certain field of that item
  5. Reload your page and check your console
<template>
  <VInlineSelect
    :model-value="props.item"
    @update:modelValue="(val) => (props.item.input_group = val)"
    item-title="input_group"
    item-value="input_group"
    :items="['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']"
    name="state"
    cell
    :empty-text="undefined"
    return-object
  ></VInlineSelect>
</template>

<script setup>
const props = defineProps({
  item: Object,
});

watch(
  () => props.item.input_group,
  (val) => {
    console.log(val);
  }
);
</script>

Relevant log output

No response

Reproduction link

/

Additional context

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

Should be fixed in the latest release. I think the item prop might have just been a left over I forgot to remove from the docs/playground example, as it's not really doing anything.