Fix fancy select not correctly displaying the label for the selected value
This commit is contained in:
parent
dc68c8ce91
commit
37bf4214a6
1 changed files with 13 additions and 1 deletions
|
@ -21,6 +21,7 @@
|
||||||
let wrapper
|
let wrapper
|
||||||
|
|
||||||
$: placeholder = !value
|
$: placeholder = !value
|
||||||
|
$: selectedLabel = getSelectedLabel(value)
|
||||||
|
|
||||||
const extractProperty = (value, property) => {
|
const extractProperty = (value, property) => {
|
||||||
if (value && typeof value === "object") {
|
if (value && typeof value === "object") {
|
||||||
|
@ -37,6 +38,17 @@
|
||||||
}
|
}
|
||||||
open = false
|
open = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getSelectedLabel = value => {
|
||||||
|
if (!value || !options?.length) {
|
||||||
|
return ""
|
||||||
|
}
|
||||||
|
const selectedOption = options.find(x => getOptionValue(x) === value)
|
||||||
|
if (!selectedOption) {
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
return getOptionLabel(selectedOption)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<FancyField
|
<FancyField
|
||||||
|
@ -53,7 +65,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="value" class:placeholder>
|
<div class="value" class:placeholder>
|
||||||
{value || ""}
|
{selectedLabel || ""}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="arrow">
|
<div class="arrow">
|
||||||
|
|
Loading…
Reference in a new issue