From 1a91da25226eb13887558178c2531288802cc743 Mon Sep 17 00:00:00 2001 From: Jicheng Lu <103353@smsassist.com> Date: Fri, 27 Sep 2024 14:25:19 -0500 Subject: [PATCH] refine multiselect --- src/lib/common/MultiSelect.svelte | 43 +++++++++++++------ .../scss/custom/components/_multiselect.scss | 4 ++ 2 files changed, 34 insertions(+), 13 deletions(-) diff --git a/src/lib/common/MultiSelect.svelte b/src/lib/common/MultiSelect.svelte index f7c8a576..bdc227dc 100644 --- a/src/lib/common/MultiSelect.svelte +++ b/src/lib/common/MultiSelect.svelte @@ -82,9 +82,9 @@ function changeSearchValue(e) { searchValue = e.target.value || ''; if (searchValue) { - innerOptions = refOptions.filter(x => x.value.includes(searchValue)); + innerOptions = [...refOptions.filter(x => x.value.includes(searchValue))]; } else { - innerOptions = refOptions; + innerOptions = [...refOptions]; } verifySelectAll(); @@ -96,20 +96,27 @@ * @param {any} option */ function checkOption(e, option) { - const found = innerOptions.find(x => x.key == option.key); - const refFound = refOptions.find(x => x.key == option.key); + innerOptions = innerOptions.map(x => { + if (x.key == option.key) { + x.checked = e == null ? !x.checked : e.target.checked; + } + return { ...x }; + }); - if (found && refFound) { - found.checked = e.target.checked; - refFound.checked = e.target.checked; - changeDisplayText(); - sendEvent(); - } + refOptions = refOptions.map(x => { + if (x.key == option.key) { + x.checked = e == null ? !x.checked : e.target.checked; + } + return { ...x }; + }); + + changeDisplayText(); + sendEvent(); } /** @param {any} e */ function checkSelectAll(e) { - selectAllChecked = e.target.checked; + selectAllChecked = e == null ? !selectAllChecked : e.target.checked; innerOptions = innerOptions.map(x => { return { ...x, checked: selectAllChecked } }); @@ -275,7 +282,12 @@ {#if innerOptions.length > 0} {#if selectAll} -
  • + + +
  • checkSelectAll(null)} + >
    {/if} {#each innerOptions as option, idx (idx)} -
  • + + +
  • checkOption(null, option)} + >