Merge pull request #8190 from michaelchadwick/frontend-3635-add-searc…

…hbox-maxlength-option added a maxlength attribute option and default for SearchBox component
ilios · Oct 25, 2024 · 6b77ceb · 6b77ceb
2 parents 7bb60d0 + 2c63644
commit 6b77ceb
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 0 deletions.
diff --git a/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/search-box.js b/packages/ilios-common/addon-test-support/ilios-common/page-objects/components/search-box.js
@@ -8,6 +8,7 @@ const definition = {
   value: value('input'),
   inputHasFocus: hasFocus('input'),
   placeholder: attribute('placeholder', 'input'),
+  keydown: triggerable('keypress', 'input'),
   esc: triggerable('keyup', 'input', { eventProperties: { key: 'Escape' } }),
 };
 

diff --git a/packages/ilios-common/addon/components/search-box.hbs b/packages/ilios-common/addon/components/search-box.hbs
@@ -6,6 +6,7 @@
     type="search"
     value={{this.value}}
     placeholder={{this.placeholder}}
+    maxlength={{this.maxlength}}
     {{on "input" this.update}}
     {{on "keyup" this.keyUp}}
     {{did-insert (set this "searchInput")}}

diff --git a/packages/ilios-common/addon/components/search-box.js b/packages/ilios-common/addon/components/search-box.js
@@ -19,6 +19,10 @@ export default class SearchBox extends Component {
     return this.args.placeholder ?? this.intl.t('general.search');
   }
 
+  get maxlength() {
+    return this.args.maxlength ?? '6000';
+  }
+
   @action
   update(event) {
     this.value = event.target.value;

diff --git a/packages/test-app/tests/integration/components/search-box-test.js b/packages/test-app/tests/integration/components/search-box-test.js
@@ -60,4 +60,28 @@ module('Integration | Component | search box', function (hooks) {
     await render(hbs`<SearchBox @search={{(noop)}} @placeholder={{this.placeholder}} />`);
     assert.strictEqual(component.placeholder, placeholder);
   });
+
+  test('default maxlength', async function (assert) {
+    const MAX_LENGTH = 6000;
+
+    await render(hbs`<SearchBox @search={{(noop)}} />`);
+    await component.set('t'.repeat(6000));
+
+    assert.strictEqual(component.value.length, MAX_LENGTH);
+
+    await component.keydown({ which: 84 });
+    assert.strictEqual(component.value.length, MAX_LENGTH);
+  });
+
+  test('custom maxlength', async function (assert) {
+    const MAX_LENGTH = 255;
+
+    await render(hbs`<SearchBox @search={{(noop)}} @maxlength={{this.MAX_LENGTH}} />`);
+    await component.set('t'.repeat(255));
+
+    assert.strictEqual(component.value.length, MAX_LENGTH);
+
+    await component.keydown({ which: 84 });
+    assert.strictEqual(component.value.length, MAX_LENGTH);
+  });
 });