Fix bug in checkboxgroup due to reassignment of value prop

This commit is contained in:
Andrew Kingston 2023-07-18 16:47:43 +01:00
parent f10da70233
commit bada641262
2 changed files with 13 additions and 12 deletions

View File

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

View File

@ -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())
} }