Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SelectMenu label not displayed for falsy values #3132

Open
ErwanLoop opened this issue Jan 17, 2025 · 0 comments
Open

SelectMenu label not displayed for falsy values #3132

ErwanLoop opened this issue Jan 17, 2025 · 0 comments
Labels
bug Something isn't working triage

Comments

@ErwanLoop
Copy link

Environment

Version

v2.20.0

Reproduction

<script setup lang="ts">
enum DiscountType {
    Fixed = 0,
    Percentage = 1
}

const types = [
    {
        label: "€",
        value: DiscountType.Fixed
    },
    {
        label: "%",
        value: DiscountType.Percentage
    }
]
const type = ref<DiscountType>(DiscountType.Fixed)
</script>

<template>
    <USelectMenu v-model="type" :options="types" value-attribute="value" />
</template>

SelectMenu does not display the label associated to the falsy value "0":
Image

The list is populated with both values:
Image

The label associated to the truthy value "1" is displayed as expected:
Image

Description

All falsy values are not displayed anymore since v2.20.0 due to the rework of the computed label in the SelectMenu component.

Here is the definition of this computed in /src/runtime/components/form/SelectMenu.vue:

const label = computed(() => {
      if (!props.modelValue) return null

      if (Array.isArray(props.modelValue) && props.modelValue.length) {
        return `${props.modelValue.length} selected`
      } else if (['string', 'number'].includes(typeof props.modelValue)) {
        return props.valueAttribute ? accessor(selected.value, props.optionAttribute) : props.modelValue
      }

      return accessor(props.modelValue as Record<string, any>, props.optionAttribute)
})

The component should treat 0, "" and false as "acceptable" labelled values.

I believe the first condition should be either :
if(props.modelValue == null) return null
Or:
if(props.modelValue === null || props.modelValue === undefined) return null

Additional context

I will try to find some time to create a pull request if this is accepted as an issue. Not sure I can manage to do it short-term though.

Logs

@ErwanLoop ErwanLoop added bug Something isn't working triage labels Jan 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working triage
Projects
None yet
Development

No branches or pull requests

1 participant