@brightspace-ui/core 2.76.3 → 2.77.0

package/components/inputs/demo/input-search.html

@@ -28,6 +28,14 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Search Input (Search on Input)</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-search label="Search" value="Will dispatch search after every input" placeholder="Search for some stuff" search-on-input>
+					</d2l-input-search>
+				</template>
+			</d2l-demo-snippet>
+
 			<script>
 				document.body.addEventListener('d2l-input-search-searched', (e) => {
 					// eslint-disable-next-line no-console

package/components/inputs/docs/input-search.md

@@ -60,6 +60,7 @@ For text searches use `<d2l-input-search>`, which wraps the native `<input type=
 | `disabled` | Boolean | Disables the input |
 | `maxlength` | Number | Imposes an upper character limit |
 | `no-clear` | Boolean | Prevents the "clear" button from appearing |
+| `search-on-input` | Boolean | Dispatch search events after each input event |
 | `placeholder` | String, default:`'Search...'` | Placeholder text |
 | `value` | String, default: `''` | Value of the input |
 

package/components/inputs/input-search.js

@@ -8,6 +8,8 @@ import { inputStyles } from './input-styles.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
+const INPUT_TIMEOUT_MS = 400;
+
 /**
  * This component wraps the native "<input type="search">"" element and is for text searching.
  * @fires d2l-input-search-searched - Dispatched when a search is performed. When the input is cleared, this will be fired with an empty value.
@@ -50,6 +52,11 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 			 * @type {string}
 			 */
 			placeholder: { type: String },
+			/**
+			 * Dispatch search events after each input event
+			 * @type {boolean}
+			 */
+			searchOnInput: { type: Boolean, attribute: 'search-on-input' },
 			/**
 			 * Value of the input
 			 * @type {string}
@@ -81,9 +88,11 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 
 	constructor() {
 		super();
+		this._inputTimeout = undefined;
 		this._lastSearchValue = '';
 		this.disabled = false;
 		this.noClear = false;
+		this.searchOnInput = false;
 		this.value = '';
 	}
 
@@ -151,6 +160,12 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 		return showSearch;
 	}
 
+	_debounceInput() {
+		clearTimeout(this._inputTimeout);
+		this._setLastSearchValue(this.value);
+		this._inputTimeout = setTimeout(() => this._dispatchEvent(), INPUT_TIMEOUT_MS);
+	}
+
 	_dispatchEvent() {
 		this.dispatchEvent(new CustomEvent(
 			'd2l-input-search-searched',
@@ -169,6 +184,9 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 
 	_handleInput(e) {
 		this.value = e.target.value;
+		if (this.searchOnInput) {
+			this._debounceInput();
+		}
 	}
 
 	_handleInputKeyPress(e) {

package/custom-elements.json

@@ -5999,6 +5999,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "search-on-input",
+          "description": "Dispatch search events after each input event",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "value",
           "description": "Value of the input",
@@ -6049,6 +6055,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "searchOnInput",
+          "attribute": "search-on-input",
+          "description": "Dispatch search events after each input event",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "value",
           "attribute": "value",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.76.3",
+  "version": "2.77.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",