diff --git a/README.md b/README.md index c8ea85f..9f7a571 100644 --- a/README.md +++ b/README.md @@ -199,6 +199,7 @@ Browser usage (for codepen etc.): | keyup | `(event)` | This event is emitted when a keyup event happens in editor | | click | `(event)` | This event is emitted when clicking anywhere in the editor | | focus | `(event)` | This event is emitted when focus | +| focusout| `(event)` | This event is emitted when focuses out | | blur | `(event)` | This event is emitted when blur | ## How it works diff --git a/packages/vue-prism-editor/README.md b/packages/vue-prism-editor/README.md index c8ea85f..9f7a571 100644 --- a/packages/vue-prism-editor/README.md +++ b/packages/vue-prism-editor/README.md @@ -199,6 +199,7 @@ Browser usage (for codepen etc.): | keyup | `(event)` | This event is emitted when a keyup event happens in editor | | click | `(event)` | This event is emitted when clicking anywhere in the editor | | focus | `(event)` | This event is emitted when focus | +| focusout| `(event)` | This event is emitted when focuses out | | blur | `(event)` | This event is emitted when blur | ## How it works diff --git a/packages/vue-prism-editor/src/Editor.ts b/packages/vue-prism-editor/src/Editor.ts index b15d316..3500174 100644 --- a/packages/vue-prism-editor/src/Editor.ts +++ b/packages/vue-prism-editor/src/Editor.ts @@ -556,6 +556,9 @@ export const PrismEditor = Vue.extend({ focus: ($event: FocusEvent) => { this.$emit('focus', $event); }, + focusout: ($event: FocusEvent) => { + this.$emit('focusout', $event); + }, blur: ($event: FocusEvent) => { this.$emit('blur', $event); }, diff --git a/packages/vue-prism-editor/tests/Editor.spec.ts b/packages/vue-prism-editor/tests/Editor.spec.ts index 7567faa..18e323e 100644 --- a/packages/vue-prism-editor/tests/Editor.spec.ts +++ b/packages/vue-prism-editor/tests/Editor.spec.ts @@ -228,15 +228,16 @@ describe('Editor', () => { expect(onKeyUp).toHaveBeenCalledTimes(1); }); - test('emits focus and blur events', async () => { + test('emits focus, focusout and blur events', async () => { const onFocus = jest.fn(); + const onFocusout = jest.fn(); const onBlur = jest.fn(); const code = 'initialCode'; - const inlineAttrs = `v-model="code" @focus="onFocus" @blur="onBlur"`; + const inlineAttrs = `v-model="code" @focus="onFocus" @focusout="onFocusout" @blur="onBlur"`; renderComponent({ inlineAttrs, - methods: { onFocus, onBlur }, + methods: { onFocus, onFocusout, onBlur }, data: () => ({ code }), }); @@ -245,6 +246,9 @@ describe('Editor', () => { await fireEvent.focus(textarea); expect(onFocus).toHaveBeenCalledTimes(1); + await fireEvent.focusOut(textarea); + expect(onFocusout).toHaveBeenCalledTimes(1); + await fireEvent.blur(textarea); expect(onBlur).toHaveBeenCalledTimes(1);