(web components) fix cursor issue text field (microsoft#20445)

* change input state styles to fix height and prevent z-index from blocking cursor * Change files * oopsie copy paste
mlp73 · Jan 17, 2022 · 80a964d · 80a964d
1 parent 84cbef0
commit 80a964d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/change/@fluentui-web-components-e876c14e-a8dc-4cbc-b324-a5382b15bc7b.json b/change/@fluentui-web-components-e876c14e-a8dc-4cbc-b324-a5382b15bc7b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "change input state styles to fix height and prevent z-index from blocking cursor",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/styles/patterns/input.styles.ts b/packages/web-components/src/styles/patterns/input.styles.ts
@@ -187,7 +187,7 @@ export const inputStateStyles: (
   :host(:not([disabled]):focus-within:not(:active))::after {
     content: '';
     position: absolute;
-    height: 100%;
+    height: calc(${focusStrokeWidth} * 1px);
     bottom: 0;
     border-bottom: calc(${focusStrokeWidth} * 1px) solid ${accentFillRest};
     border-bottom-left-radius: calc(${controlCornerRadius} * 1px);