Improve select determination of field text

This commit is contained in:
Andrew Kingston 2021-04-16 11:32:24 +01:00
parent 84da746bb7
commit b14e993846
1 changed files with 18 additions and 8 deletions

View File

@ -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} />