diff --git a/packages/input-container/src/vaadin-input-container-mixin.js b/packages/input-container/src/vaadin-input-container-mixin.js new file mode 100644 index 0000000000..807f1a7232 --- /dev/null +++ b/packages/input-container/src/vaadin-input-container-mixin.js @@ -0,0 +1,62 @@ +/** + * @license + * Copyright (c) 2021 - 2023 Vaadin Ltd. + * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ + */ + +/** + * @polymerMixin + */ +export const InputContainerMixin = (superClass) => + class InputContainerMixinClass extends superClass { + static get properties() { + return { + /** + * If true, the user cannot interact with this element. + */ + disabled: { + type: Boolean, + reflectToAttribute: true, + }, + + /** + * Set to true to make this element read-only. + */ + readonly: { + type: Boolean, + reflectToAttribute: true, + }, + + /** + * Set to true when the element is invalid. + */ + invalid: { + type: Boolean, + reflectToAttribute: true, + }, + }; + } + + /** @protected */ + ready() { + super.ready(); + + this.addEventListener('pointerdown', (event) => { + if (event.target === this) { + // Prevent direct clicks to the input container from blurring the input + event.preventDefault(); + } + }); + + this.addEventListener('click', (event) => { + if (event.target === this) { + // The vaadin-input-container element was directly clicked, + // focus any focusable child element from the default slot + this.shadowRoot + .querySelector('slot:not([name])') + .assignedNodes({ flatten: true }) + .forEach((node) => node.focus && node.focus()); + } + }); + } + }; diff --git a/packages/input-container/src/vaadin-input-container.js b/packages/input-container/src/vaadin-input-container.js index 44fec33790..4d347c8623 100644 --- a/packages/input-container/src/vaadin-input-container.js +++ b/packages/input-container/src/vaadin-input-container.js @@ -7,14 +7,16 @@ import { html, PolymerElement } from '@polymer/polymer'; import { defineCustomElement } from '@vaadin/component-base/src/define.js'; import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js'; import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; +import { InputContainerMixin } from './vaadin-input-container-mixin.js'; /** * @customElement * @extends HTMLElement * @mixes ThemableMixin * @mixes DirMixin + * @mixes InputContainerMixin */ -export class InputContainer extends ThemableMixin(DirMixin(PolymerElement)) { +export class InputContainer extends InputContainerMixin(ThemableMixin(DirMixin(PolymerElement))) { static get is() { return 'vaadin-input-container'; } @@ -92,57 +94,6 @@ export class InputContainer extends ThemableMixin(DirMixin(PolymerElement)) { `; } - - static get properties() { - return { - /** - * If true, the user cannot interact with this element. - */ - disabled: { - type: Boolean, - reflectToAttribute: true, - }, - - /** - * Set to true to make this element read-only. - */ - readonly: { - type: Boolean, - reflectToAttribute: true, - }, - - /** - * Set to true when the element is invalid. - */ - invalid: { - type: Boolean, - reflectToAttribute: true, - }, - }; - } - - /** @protected */ - ready() { - super.ready(); - - this.addEventListener('pointerdown', (event) => { - if (event.target === this) { - // Prevent direct clicks to the input container from blurring the input - event.preventDefault(); - } - }); - - this.addEventListener('click', (event) => { - if (event.target === this) { - // The vaadin-input-container element was directly clicked, - // focus any focusable child element from the default slot - this.shadowRoot - .querySelector('slot:not([name])') - .assignedNodes({ flatten: true }) - .forEach((node) => node.focus && node.focus()); - } - }); - } } defineCustomElement(InputContainer);