diff --git a/README.md b/README.md index d3d9595..33850fa 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,18 @@ expander.addEventListener('text-expander-value', function(event) { }) ``` +**`text-expander-committed`** is fired after the underlying `input` value has been updated in the DOM. In `event.detail` you can find: + +- `input`: The `HTMLInputElement` or `HTMLTextAreaElement` that just had `value` changes committed to the DOM. + +```js +const expander = document.querySelector('text-expander') + +expander.addEventListener('text-expander-committed', function(event) { + const {input} = event.detail +}) +``` + ## Browser support Browsers without native [custom element support][support] require a [polyfill][]. diff --git a/src/text-expander-element.ts b/src/text-expander-element.ts index f0c57ce..1f43c14 100644 --- a/src/text-expander-element.ts +++ b/src/text-expander-element.ts @@ -140,6 +140,10 @@ class TextExpander { this.input.selectionEnd = cursor this.lookBackIndex = cursor this.match = null + + this.expander.dispatchEvent( + new CustomEvent('text-expander-committed', {cancelable: false, detail: {input: this.input}}) + ) } private onBlur() {