Fix bug in checkboxgroup due to reassignment of value prop
This commit is contained in:
parent
f10da70233
commit
bada641262
|
@ -12,23 +12,24 @@
|
||||||
export let getOptionValue = option => option
|
export let getOptionValue = option => option
|
||||||
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
const onChange = e => {
|
const onChange = e => {
|
||||||
let tempValue = value
|
const optionValue = e.target.value
|
||||||
let isChecked = e.target.checked
|
if (e.target.checked && !value.includes(optionValue)) {
|
||||||
if (!tempValue.includes(e.target.value) && isChecked) {
|
dispatch("change", [...value, optionValue])
|
||||||
tempValue.push(e.target.value)
|
} else {
|
||||||
|
dispatch(
|
||||||
|
"change",
|
||||||
|
value.filter(x => x !== optionValue)
|
||||||
|
)
|
||||||
}
|
}
|
||||||
value = tempValue
|
|
||||||
dispatch(
|
|
||||||
"change",
|
|
||||||
tempValue.filter(val => val !== e.target.value || isChecked)
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
|
<div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
|
||||||
{#if options && Array.isArray(options)}
|
{#if options && Array.isArray(options)}
|
||||||
{#each options as option}
|
{#each options as option}
|
||||||
|
{@const optionValue = getOptionValue(option)}
|
||||||
<div
|
<div
|
||||||
title={getOptionLabel(option)}
|
title={getOptionLabel(option)}
|
||||||
class="spectrum-Checkbox spectrum-FieldGroup-item"
|
class="spectrum-Checkbox spectrum-FieldGroup-item"
|
||||||
|
@ -39,11 +40,11 @@
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
on:change={onChange}
|
on:change={onChange}
|
||||||
value={getOptionValue(option)}
|
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
class="spectrum-Checkbox-input"
|
class="spectrum-Checkbox-input"
|
||||||
|
value={optionValue}
|
||||||
|
checked={value.includes(optionValue)}
|
||||||
{disabled}
|
{disabled}
|
||||||
checked={value.includes(getOptionValue(option))}
|
|
||||||
/>
|
/>
|
||||||
<span class="spectrum-Checkbox-box">
|
<span class="spectrum-Checkbox-box">
|
||||||
<svg
|
<svg
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
if (Array.isArray(values)) {
|
if (Array.isArray(values)) {
|
||||||
return values
|
return values.slice()
|
||||||
}
|
}
|
||||||
return values.split(",").map(value => value.trim())
|
return values.split(",").map(value => value.trim())
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue