jcfranco · March 29, 2022 21:52
diff --git a/controllers.application\.js b/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);
  }
 }
diff --git a/templates.application\.hbs b/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}}
diff --git a/tests.test-helper\.js b/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();
diff --git a/twiddle\.json b/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"
  }
 }
	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);
	}
	}
	<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}}
	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();
	{
	"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"
	}
	}