From a5e0cafaffa9c70334517b368197b5c3080dcf54 Mon Sep 17 00:00:00 2001
From: Chris Holt <chhol@microsoft.com>
Date: Tue, 1 Jun 2021 12:10:01 -0700
Subject: [PATCH] (web-components) fix select style height overlap (#18348)

* fix a bug where the bottom border for select and comobox would visually disappear on active states

* Change files
---
 ...omponents-861ce175-84fa-4e22-a53c-fea1744825d2.json |  7 +++++++
 packages/web-components/src/select/select.styles.ts    | 10 ++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 change/@fluentui-web-components-861ce175-84fa-4e22-a53c-fea1744825d2.json

diff --git a/change/@fluentui-web-components-861ce175-84fa-4e22-a53c-fea1744825d2.json b/change/@fluentui-web-components-861ce175-84fa-4e22-a53c-fea1744825d2.json
new file mode 100644
index 0000000000000..2ad83869d9a76
--- /dev/null
+++ b/change/@fluentui-web-components-861ce175-84fa-4e22-a53c-fea1744825d2.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix a bug where the bottom border for select and comobox would visually disappear on active states",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/select/select.styles.ts b/packages/web-components/src/select/select.styles.ts
index a9bbc22bf3104..c29a3e5146899 100644
--- a/packages/web-components/src/select/select.styles.ts
+++ b/packages/web-components/src/select/select.styles.ts
@@ -54,11 +54,12 @@ export const selectStyles = (context, definition) =>
         border: calc(${outlineWidth} * 1px) solid ${neutralOutlineRest};
         box-sizing: border-box;
         color: ${neutralForegroundRest};
-        contain: contents;
+        font-family: ${bodyFont};
         height: calc(${heightNumber} * 1px);
         position: relative;
         user-select: none;
         min-width: 250px;
+        vertical-align: top;
     }
 
     .listbox {
@@ -88,9 +89,9 @@ export const selectStyles = (context, definition) =>
         cursor: pointer;
         display: flex;
         font-size: ${typeRampBaseFontSize};
-        font: inherit;
+        font-family: inherit;
+        min-height: 100%;
         line-height: ${typeRampBaseLineHeight};
-        min-height: calc(${heightNumber} * 1px);
         padding: 0 calc(${designUnit} * 2.25px);
         width: 100%;
     }
@@ -131,6 +132,7 @@ export const selectStyles = (context, definition) =>
 
     :host([disabled]) .control {
         cursor: ${disabledCursor};
+        user-select: none;
     }
 
     :host([disabled]:hover) {
@@ -167,7 +169,7 @@ export const selectStyles = (context, definition) =>
     }
 
     .selected-value {
-        font-family: ${bodyFont};
+        font-family: inherit;
         flex: 1 1 auto;
         text-align: start;
     }