fix: prevent input from losing focus while animation

vaadin · Sep 17, 2021 · b8e1833 · b8e1833
1 parent c3fe4ae
commit b8e1833
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/packages/checkbox/src/vaadin-checkbox.js b/packages/checkbox/src/vaadin-checkbox.js
@@ -95,8 +95,6 @@ class Checkbox extends SlotLabelMixin(
           opacity: 0;
           cursor: inherit;
           margin: 0;
-          /* A workaround to prevent loosing focus during CSS animations. */
-          z-index: 1;
         }
       </style>
       <div part="container">

diff --git a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js
@@ -43,6 +43,7 @@ registerStyles(
     /* Checkmark */
     [part='checkbox']::after {
       content: '';
+      pointer-events: none;
       display: inline-block;
       width: 0;
       height: 0;
@@ -116,6 +117,7 @@ registerStyles(
 
     /* Used for activation "halo" */
     [part='checkbox']::before {
+      pointer-events: none;
       color: transparent;
       display: inline-block;
       width: 100%;

diff --git a/packages/checkbox/theme/material/vaadin-checkbox-styles.js b/packages/checkbox/theme/material/vaadin-checkbox-styles.js
@@ -40,6 +40,7 @@ registerStyles(
     [part='checkbox']::before {
       /* Needed to align the checkbox nicely on the baseline */
       content: '\\2003';
+      pointer-events: none;
       display: inline-block;
       width: 100%;
       height: 100%;
@@ -54,6 +55,7 @@ registerStyles(
     /* Used for the checkmark */
     [part='checkbox']::after {
       content: '';
+      pointer-events: none;
       display: inline-block;
       width: 10px;
       height: 19px;