Fix strict typing on abstract select

addon/components/field-for.js

@@ -223,7 +223,7 @@ export default class FieldForComponent extends Component {
     return (
       !this.inlineEditing ||
       (this.inlineEditing && this.isEditing) ||
-      (this.hasControlCallout && this.hasErrors)
+      (this.inlineEditing && this.hasErrors)
     );
   }
 
@@ -472,7 +472,13 @@ export default class FieldForComponent extends Component {
    */
   @arg(func)
   formatValue = (value) => {
-    return this._hasCompositeValue ? JSON.stringify(value) : value;
+    if (this._hasCompositeValue) {
+      return JSON.stringify(value);
+    } else if (isArray(value)) {
+      return value.map((v) => JSON.stringify(v));
+    } else {
+      return value;
+    }
   };
 
   /**
@@ -575,7 +581,11 @@ export default class FieldForComponent extends Component {
     this.isEditing = true;
     later(() => {
       if (this._showControl) {
-        document.querySelector(`#${this.controlId}`).focus();
+        const control = document.querySelector(`#${this.controlId}`);
+
+        if (control) {
+          control.focus();
+        }
       }
     }, 100);
   }

addon/components/form-controls/abstract-select.js

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { arg } from 'ember-arg-types';
-import { string, array } from 'prop-types';
+import { string } from 'prop-types';
 import { typeOf } from '@ember/utils';
 import { get } from '@ember/object';
 import { action } from '@ember/object';
@@ -12,7 +12,7 @@ export default class FormControlsAbstractSelectComponent extends Component {
   @arg(string)
   idKey = 'id';
 
-  @arg(array)
+  @arg
   values = [];
 
   get isPrimitive() {

addon/components/form-controls/ff-checkbox-select.hbs

@@ -21,4 +21,15 @@
       {{/let}}
     </div>
   {{/each}}
+
+  {{#if this.showClearAll}}
+    <button
+      type="button"
+      class="ff-control-checkbox-select-clear-all"
+      data-test-ff-control-checkbox-select-clear-all
+      {{on "click" this.clearAll}}
+    >
+      Clear All
+    </button>
+  {{/if}}
 </div>

addon/components/form-controls/ff-checkbox-select.js

@@ -1,16 +1,20 @@
 import FormControlsAbstractSelectComponent from './abstract-select';
 import { action } from '@ember/object';
 import { arg } from 'ember-arg-types';
-import { string, array } from 'prop-types';
+import { string, bool } from 'prop-types';
 import { get } from '@ember/object';
+import { A } from '@ember/array';
 
 export default class FormControlsFfCheckboxSelectComponent extends FormControlsAbstractSelectComponent {
   @arg(string)
   for = 'id';
 
-  @arg(array)
+  @arg
   value = [];
 
+  @arg(bool)
+  showClearAll = false;
+
   @action
   idFor(item) {
     return `${this.for}-${this.isPrimitive ? item : get(item, this.idKey)}`;
@@ -26,13 +30,18 @@ export default class FormControlsFfCheckboxSelectComponent extends FormControlsA
     if (this.isSelected(value)) {
       this.args.onChange(this.value.filter((_) => !this._compare(_, value)));
     } else {
-      this.args.onChange([value].concat(this.value));
+      this.args.onChange(A(this.value).toArray().concat(value));
     }
   }
 
   @action
   isSelected(value) {
-    return this.value.some((_) => this._compare(_, value));
+    return !!this.value.find((_) => this._compare(_, value));
+  }
+
+  @action
+  clearAll() {
+    return this.args.onChange([]);
   }
 
   _compare(a, b) {

tests/integration/components/form-for-test.js

@@ -222,7 +222,7 @@ module('Integration | Component | form for', function (hooks) {
   });
 
   test('it does not hide the control when inline-editing when there are errors', async function (assert) {
-    this.model = { foo: 'bar', errors: { foo: ['bar error'] } };
+    this.model = { foo: 'bar', errors: { foo: [{ message: 'bar error' }] } };
 
     await render(hbs`
       <FormFor @model={{this.model}} as |f|>
@@ -235,8 +235,7 @@ module('Integration | Component | form for', function (hooks) {
     assert.dom('input').hasValue('bar');
     assert.dom('[data-test-form-error]').hasText('bar error');
     await click('[data-test-commit-buttons-cancel]');
-    assert.dom('input').doesNotExist();
-    assert.dom('.field-for-value-container').hasText('bar');
+    assert.dom('[data-test-form-error]').hasText('bar error');
   });
 
   test('it shows the control and the value when inline-editing and has-control-callout and the value is clicked', async function (assert) {