Update all form components to update bound values before firing onchange events

This commit is contained in:
Andrew Kingston 2021-04-20 12:49:02 +01:00
parent e3bb206b2d
commit b70afda93c
11 changed files with 19 additions and 17 deletions

View File

@ -12,8 +12,8 @@
const dispatch = createEventDispatcher()
const onChange = e => {
dispatch("change", e.detail)
value = e.detail
dispatch("change", e.detail)
}
</script>

View File

@ -15,8 +15,8 @@
const dispatch = createEventDispatcher()
const onChange = e => {
dispatch("change", e.detail)
value = e.detail
dispatch("change", e.detail)
}
const extractProperty = (value, property) => {
if (value && typeof value === "object") {

View File

@ -46,10 +46,10 @@
let map = null
if (options?.length) {
map = {}
options.forEach(option => {
const optionValue = getOptionValue(option)
options.forEach((option, idx) => {
const optionValue = getOptionValue(option, idx)
if (optionValue != null) {
map[optionValue] = getOptionLabel(option) || ""
map[optionValue] = getOptionLabel(option, idx) || ""
}
})
}

View File

@ -81,16 +81,16 @@
</li>
{/if}
{#if options && Array.isArray(options)}
{#each options as option}
{#each options as option, idx}
<li
class="spectrum-Menu-item"
class:is-selected={isOptionSelected(getOptionValue(option))}
class:is-selected={isOptionSelected(getOptionValue(option, idx))}
role="option"
aria-selected="true"
tabindex="0"
on:click={() => onSelectOption(getOptionValue(option))}>
on:click={() => onSelectOption(getOptionValue(option, idx))}>
<span
class="spectrum-Menu-itemLabel">{getOptionLabel(option)}</span>
class="spectrum-Menu-itemLabel">{getOptionLabel(option, idx)}</span>
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
focusable="false"

View File

@ -28,8 +28,10 @@
}
// 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 index = options.findIndex(
(option, idx) => getOptionValue(option, idx) === value
)
return index !== -1 ? getOptionLabel(options[index], index) : value
}
const selectOption = value => {

View File

@ -14,8 +14,8 @@
const dispatch = createEventDispatcher()
const onChange = e => {
dispatch("change", e.detail)
value = e.detail
dispatch("change", e.detail)
}
</script>

View File

@ -16,8 +16,8 @@
const dispatch = createEventDispatcher()
const onChange = e => {
dispatch("change", e.detail)
value = e.detail
dispatch("change", e.detail)
}
</script>

View File

@ -14,8 +14,8 @@
const dispatch = createEventDispatcher()
const onChange = e => {
dispatch("change", e.detail)
value = e.detail
dispatch("change", e.detail)
}
const extractProperty = (value, property) => {
if (value && typeof value === "object") {

View File

@ -16,8 +16,8 @@
const dispatch = createEventDispatcher()
const onChange = e => {
dispatch("change", e.detail)
value = e.detail
dispatch("change", e.detail)
}
const extractProperty = (value, property) => {
if (value && typeof value === "object") {

View File

@ -13,8 +13,8 @@
const dispatch = createEventDispatcher()
const onChange = e => {
dispatch("change", e.detail)
value = e.detail
dispatch("change", e.detail)
}
</script>

View File

@ -12,8 +12,8 @@
const dispatch = createEventDispatcher()
const onChange = e => {
dispatch("change", e.detail)
value = e.detail
dispatch("change", e.detail)
}
</script>