fix(text-field): Default to min on empty value (#523)

* fix(trim-input): Check nullish first

* fix(text-field): Default to min on empty value

* chore: Update tests

* chore: Update Freestyle

* chore: Bump package version

Author: TSenter

addon/components/nrg-text-field.js

@@ -1,5 +1,6 @@
 import NrgValidationComponent from './nrg-validation-component';
 import { action } from '@ember/object';
+import { isEmpty } from '@ember/utils';
 
 const defaultType = 'text';
 export default class NrgTextFieldComponent extends NrgValidationComponent {
@@ -13,6 +14,11 @@ export default class NrgTextFieldComponent extends NrgValidationComponent {
     }
 
     if (this.type === 'number') {
+      if (isEmpty(input)) {
+        const min = this.args.min ?? 0;
+        super.onChange(min);
+        return false;
+      }
       if (this.args.allowDecimals) {
         return !isNaN(parseFloat(input));
       }

addon/components/nrg-text-field/trim-input.js

@@ -13,13 +13,16 @@ export default class TrimInputComponent extends Component {
 
   get trimmedOuterValue() {
     const value = this.args.value;
-    if (value && typeof value == 'string') {
+
+    if (value === undefined || value === null) {
+      return '';
+    }
+    if (typeof value == 'string') {
       return value.trim() ?? '';
-    } else if (value && typeof value == 'number') {
+    } else if (typeof value == 'number') {
       return value.toString() ?? '';
-    } else {
-      return '';
     }
+    return '';
   }
 
   get trimmedInnerValue() {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-nrg-ui",
-  "version": "4.1.9",
+  "version": "4.1.10",
   "description": "Opinionated UI addon based on how KUB scaffolds web applications",
   "keywords": [
     "ember-addon",

tests/dummy/app/components/freestyle/forms/text-field.hbs

@@ -10,6 +10,7 @@
               @readonly={{this.readonly}}
               @valuePath="inputValue"
               @model={{this}}
+              @type={{this.type}}
               as |view|
             >
               {{view.input}}
@@ -31,6 +32,13 @@
           @value={{this.readonly}}
           @onInput={{fn (mut this.readonly)}}
         />
+        <Args.String
+          @name="type"
+          @description="Type"
+          @value={{this.type}}
+          @onInput={{fn (mut this.type)}}
+          @options={{array "text" "number"}}
+        />
       </:api>
     </Freestyle::Usage>
 

tests/integration/components/nrg-text-field-test.js

@@ -21,8 +21,8 @@ module('Integration | Component | nrg-text-field', function (hooks) {
 
     await fillIn('input', 'bob');
 
-    assert.dom('input').hasValue('');
-    assert.strictEqual(this.value, undefined);
+    assert.dom('input').hasValue('0');
+    assert.strictEqual(this.value, 0);
   });
 
   test('number fields allow numeric characters', async function (assert) {
@@ -92,4 +92,21 @@ module('Integration | Component | nrg-text-field', function (hooks) {
     assert.dom('input').hasValue('-123');
     assert.strictEqual(this.value, '-123');
   });
+
+  test('number fields default to min', async function (assert) {
+    this.min = -5;
+    this.value = 7;
+
+    await render(
+      hbs`<NrgTextField @model={{this}} @valuePath="value" @type="number" @min={{this.min}} />`
+    );
+
+    assert.dom('input').hasValue('7');
+    assert.strictEqual(this.value, 7);
+
+    await fillIn('input', '');
+
+    assert.dom('input').hasValue('-5');
+    assert.strictEqual(this.value, -5);
+  });
 });