fix(MultiInputMask): incorrect legend hover and focus within effect (#…

…2861)
dnbexperience · Nov 7, 2023 · 1cd6be4 · 1cd6be4
1 parent b90acdb
commit 1cd6be4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/...dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.tsx.snap b/...dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.tsx.snap
@@ -1321,13 +1321,13 @@ html[data-visual-test] .dnb-input__input {
   color: var(--color-black);
 }
 .dnb-multi-input-mask .dnb-input__shell:focus-within {
-  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--input-border-width--focus) var(--input-border-color--hover);
 }
 
 .dnb-multi-input-mask__legend--horizontal.dnb-form-label {
   display: contents;
 }
-.dnb-multi-input-mask__legend:not([disabled]):hover ~ .dnb-multi-input-mask__legend .dnb-input__shell {
-  --border-width: 0.125rem;
+.dnb-multi-input-mask__legend:not([disabled]):hover ~ .dnb-multi-input-mask .dnb-input__shell {
+  box-shadow: 0 0 0 var(--input-border-width--focus) var(--input-border-color--hover);
 }"
 `;
diff --git a/packages/dnb-eufemia/src/components/input-masked/style/dnb-input-masked.scss b/packages/dnb-eufemia/src/components/input-masked/style/dnb-input-masked.scss
@@ -68,7 +68,8 @@
   }
 
   .dnb-input__shell:focus-within {
-    --border-width: 0.125rem;
+    box-shadow: 0 0 0 var(--input-border-width--focus)
+      var(--input-border-color--hover);
   }
 }
 
@@ -77,7 +78,8 @@
     display: contents;
   }
 
-  &:not([disabled]):hover ~ & .dnb-input__shell {
-    --border-width: 0.125rem;
+  &:not([disabled]):hover ~ .dnb-multi-input-mask .dnb-input__shell {
+    box-shadow: 0 0 0 var(--input-border-width--focus)
+      var(--input-border-color--hover);
   }
 }