feat(search): Perform search on focus when minCharacters is zero (#590)

* feat(search): Perform search on focus when minCharacters is zero

* chore: PR changes

Author: nadeemhemani

addon/components/nrg-search.js

@@ -64,7 +64,7 @@ export default class NrgSearchComponent extends NrgValidationComponent {
   }
 
   get canPerformSearch() {
-    return this.searchString?.length >= this.minCharacters;
+    return (this.searchString?.length ?? 0) >= this.minCharacters;
   }
 
   get receivedResults() {

package.json

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

tests/dummy/app/components/freestyle/search.hbs

@@ -17,6 +17,7 @@
         @query={{this.query}}
         @model={{this}}
         @valuePath="selectedResult"
+        @minCharacters={{this.minCharacters}}
       />
     </:example>
 
@@ -45,6 +46,11 @@
         @value={{this.clearable}}
         @onInput={{fn (mut this.clearable)}}
       />
+      <Args.String
+        @name="minCharacters"
+        @value={{this.minCharacters}}
+        @onInput={{fn (mut this.minCharacters)}}
+      />
 
     </:api>
   </Freestyle::Usage>

tests/dummy/app/components/freestyle/search.js

@@ -34,6 +34,9 @@ export default class FreestyleNrgSearchComponent extends Component {
   @tracked
   selectedResult = null;
 
+  @tracked
+  minCharacters = 1;
+
   @action
   async query(queryString) {
     this.queryString = queryString;

tests/integration/components/nrg-search-test.js

@@ -39,6 +39,19 @@ module('Integration | Component | nrg-search', function (hooks) {
     assert.ok(findAll('.results').length);
   });
 
+  test('results display on focus when minCharacters is zero', async function (assert) {
+    this.query = () => {
+      return [
+        {
+          header: 'header',
+        },
+      ];
+    };
+    await render(hbs`<NrgSearch @query={{this.query}} @minCharacters="0"/>`);
+    await click('input');
+    assert.ok(findAll('.results').length);
+  });
+
   test('results do not display when loading', async function (assert) {
     this.query = () => {
       return [{}];