refactor: extract input-container logic into reusable mixin (#6574)

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());
+        }
+      });
+    }
+  };

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)) {
       <slot name="suffix"></slot>
     `;
   }
-
-  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);