Base Calcite

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';

	@tracked items;
 
	init() {
    super.init()
    
    const script = document.createElement('script')
    script.type = 'module'
    script.src = 'https://localhost/dist/calcite/calcite.esm.js'
    document.head.appendChild(script)
    
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = 'https://localhost/dist/calcite/calcite.css' 
    document.head.appendChild(link)
    
    this.items = [
      {label: 'item 1'},
      {label: 'item 2'},
    ];
  }

  @action
  orderChanged(e) {
    const orderIndicies = e.detail;
    this.items = orderIndicies.map(i => this.items[i]);
    console.log(this.items); 
  }

	@action
	deleteItem(index, e) {
    // prevent list from handling removal
   e.preventDefault();
    
    const itemToRemove = this.items[index];
    this.items = this.items.filter(i => i !== itemToRemove);
    console.log(this.items);
  }
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

<h2>Repro Steps</h2>
<ol>
	<li>Drag item 2 into the first position in the list</li>
	<li>Remove item 1</li>
  <li>Observe both items are removed. Notice the data is still correct (item 2 is still in the list) but the calcite-value-list is not rendering item 2.</li>
</ol>

<calcite-value-list drag-enabled {{on 'calciteListOrderChange' this.orderChanged}}>
	{{#each this.items key='label' as |item index|}}
  	<calcite-value-list-item 
    	label={{item.label}} 
      value={{index}} 
      removable 
      {{on 'calciteListItemRemove' (fn this.deleteItem index)}}> 
      </calcite-value-list-item>
	{{/each}} 
</calcite-value-list>

<br>

{{#each this.items as |item|}}
	<div>  	
		{{item.label}}
	</div>
{{/each}}

tests.test-helper\.js

import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { assign } from '@ember/polyfills';
import { start } from 'ember-qunit';

let attributes = {
  rootElement: '#test-root',
  autoboot: false
};
attributes = assign(attributes, config.APP);

let application = Application.create(attributes);
setApplication(application);

start();

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}