Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

114
Vistas
Svelte checkboxes suddenly can't be checked

Below is the code to reproduce my problem (Svelte 3.0.0).

Repro steps:

  1. Click a checkbox. (behaves normally)
  2. Type some characters into the search box.
  3. Delete the characters you just typed.
  4. Click a checkbox again. Note that now it has no effect. The checkbox stays blank.

EDIT: It seems to be related to this line:

bind:group={selectedVars[schemaVar.name].lts}

If I hardcode that to:

bind:group={selectedVars['bar'].lts}

Then it works fine.

Any ideas why the filter breaks the checkboxes?

<script>
  let schema = {
    name: "bar",
    vars: [{ name: "X" }],
  };

  $: availableLTs = ["aaa", "bbb", "ccc", "abc"];

  function matchesSearch(searchString, text) {
    let query = searchString;
    console.log("query is", query);
    if (!query) return true;
    return text.includes(query);
  }

  let selectedChart = 'bar';
  let selectedVars = {X: { lts: [] }};
  $: schemaVars = schema.vars;
  let searchString = "";
</script>

<main>
  {#each schemaVars as schemaVar}
    <h6>
      {schemaVar.name}
      <input type="text" bind:value={searchString} placeholder="Search..." />
    </h6>
    {#each availableLTs as ele}
      {#if matchesSearch(searchString, ele)}
        <div class="form-check">
          <label>
            <input
              type="checkbox"
              class="form-check-input"
              bind:group={selectedVars[schemaVar.name].lts}
              value={ele}
            />
            {ele}
          </label>
        </div>
      {/if}
    {/each}
  {/each}
</main>
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

You can solve this problem like this

In App.Svelte

<script>
  import Checkbox from './Checkbox.svelte';
    
  let schema = {
    name: "bar",
    vars: [{ name: "X" }],
  };

  $: availableLTs = ["aaa", "bbb", "ccc", "ABC"];   
  $: matchesSearch = availableLTs.filter((elem) =>{ return elem.includes(searchString); })

  let selectedChart = 'bar'; 
  let selectedVars = {X: { lts: [] }};
  $: console.log(selectedVars)
  $: schemaVars = schema.vars;
  let searchString = "";
</script>

<main>
  {#each schemaVars as {name}}
    <h6>
      {name}
      <input type="text" bind:value={searchString} placeholder="Search..." />
    </h6>
    <Checkbox bind:value={selectedVars} {name} {matchesSearch}/>
  {/each}
</main>

In Checkbox.Svelte


<script>
    export let value, name, matchesSearch;
</script>

{#each matchesSearch as ele}
    <div class="form-check">
        <label>
            <input
                         type="checkbox"
                         class="form-check-input"
                         bind:group={value[name].lts}
                         value={ele}
            /> 
            {ele}
        </label>
    </div>
{/each}

You can check it in this repl

about 4 years ago · Juan Pablo Isaza Denunciar

0

Looks like the problem has something to do with the nested each loops

  {#each schemaVars as schemaVar}
    ...
    {#each availableLTs as ele}
      
    ...//Checkbox

    {/each}
  {/each}

which can be solved through wrapping the inner loop inside a component.

The previous answer almost solved the problem, but one important thing is missing: The each loop inside the component is not a "keyed each block" ->

  1. select the third checkbox 'ccc'
  2. filter for 'c'
  3. -> 'ccc' moves to the first position and is not checked anymore

(alternatively select 'aaa' and filter for 'b'...)

This can be solved by adding the label text as key/id (assuming that the checkbox labels are unique) ->

{#each filteredLTs as ele (ele)}        
        ...
{/each}

Since the problem wasn't the way the variable was set (...selectedVars[schemaVar.name].lts}), I would try to keep the logic inside the component general and set the variables specifially inside the component tag inside App.svelte -> the component stays universal and can be easyly reused Example in this REPL

[App.svelte]
<script>
import Checkboxes from './Checkboxes.svelte'
    
let schema = {
   name: "bar",
   vars: [{ name: "X" }],
};

let allLTs = ["aaa", "bbb", "ccc", "abc"];
let searchString = "";
    
$: filteredLTs = allLTs.filter(lt => lt.includes(searchString)) 
let selectedVars = {X: { lts: [] }};
    
$: console.log(selectedVars.X.lts)
    
</script>

<main>
  {#each schema.vars as schemaVar}
    <h6>
      {schemaVar.name}
      <input type="text" bind:value={searchString} placeholder="Search..." />
    </h6>
    
    <div class="form-check">
    <Checkboxes checkboxes={filteredLTs} bind:checked={selectedVars[schemaVar.name].lts}/>
  </div>
  {/each}
</main>
[Checkboxes.svelte]
<script>
    export let checkboxes, checked  
</script>

{#each checkboxes as checkbox (checkbox)}        
        <label>
            <input
              type="checkbox"
              class="form-check-input"
              bind:group={checked}
              value={checkbox}
            />
            {checkbox}
   </label>
{/each}
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda