Improve select determination of field text
This commit is contained in:
parent
84da746bb7
commit
b14e993846
|
@ -13,13 +13,23 @@
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
let open = false
|
let open = false
|
||||||
$: isNull = value == null || value === ""
|
$: fieldText = getFieldText(value, options, placeholder)
|
||||||
$: placeholderText = placeholder || "Choose an option"
|
|
||||||
$: selectedOption = options.find(option => getOptionValue(option) === value)
|
const getFieldText = (value, options, placeholder) => {
|
||||||
$: selectedLabel = selectedOption
|
// Always use placeholder if no value
|
||||||
? getOptionLabel(selectedOption)
|
if (value == null || value === "") {
|
||||||
: placeholderText
|
return placeholder || "Choose an option"
|
||||||
$: fieldText = isNull ? placeholderText : selectedLabel
|
}
|
||||||
|
|
||||||
|
// Wait for options to load if there is a value but no options
|
||||||
|
if (!options?.length) {
|
||||||
|
return ""
|
||||||
|
}
|
||||||
|
|
||||||
|
// Render the label if the selected option is found, otherwide raw value
|
||||||
|
const selected = options.find(option => getOptionValue(option) === value)
|
||||||
|
return selected ? getOptionLabel(selected) : value
|
||||||
|
}
|
||||||
|
|
||||||
const selectOption = value => {
|
const selectOption = value => {
|
||||||
dispatch("change", value)
|
dispatch("change", value)
|
||||||
|
@ -36,7 +46,7 @@
|
||||||
{options}
|
{options}
|
||||||
{getOptionLabel}
|
{getOptionLabel}
|
||||||
{getOptionValue}
|
{getOptionValue}
|
||||||
isPlaceholder={isNull}
|
isPlaceholder={value == null || value === ''}
|
||||||
placeholderOption={placeholder}
|
placeholderOption={placeholder}
|
||||||
isOptionSelected={option => option === value}
|
isOptionSelected={option => option === value}
|
||||||
onSelectOption={selectOption} />
|
onSelectOption={selectOption} />
|
||||||
|
|
Loading…
Reference in New Issue