From 814ce8210eb92cc0e6b2e39229dc245cbe24a9cd Mon Sep 17 00:00:00 2001
From: Wesley Moses <wesmoses@gmail.com>
Date: Thu, 18 Aug 2022 11:47:21 +0300
Subject: [PATCH] [@mantine/core] MultiSelect: Fix incorrect line-height styles
 (Windows Chrome and Edge) (#2154)

* [@mantine/core] Select: only use open/close callback when value changes

* [@mantine/core] Select: do not use early return

* [@mantine/core] Multiselect: fix line heights
---
 .../src/MultiSelect/MultiSelect.story.tsx     | 21 +++++++++++++++++++
 .../src/MultiSelect/MultiSelect.styles.ts     |  6 +++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/mantine-core/src/MultiSelect/MultiSelect.story.tsx b/src/mantine-core/src/MultiSelect/MultiSelect.story.tsx
index e6d99a9db3b..44b53fab043 100644
--- a/src/mantine-core/src/MultiSelect/MultiSelect.story.tsx
+++ b/src/mantine-core/src/MultiSelect/MultiSelect.story.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { Stack } from '../Stack';
+import { TextInput } from '../TextInput';
 import { MultiSelect } from './MultiSelect';
 
 export default { title: 'MultiSelect' };
@@ -27,3 +29,22 @@ export function EmptyGroup() {
     />
   );
 }
+
+export function SizeXSLineHeight() {
+  return (
+    <Stack style={{ padding: 20 }}>
+      <TextInput
+        error="Font styles should be identical"
+        size="xs"
+        placeholder="Placeholder Textinput"
+      />
+
+      <MultiSelect
+        error="Placeholder should be centered correctly"
+        size="xs"
+        data={['One', 'Two', 'Three']}
+        placeholder="Placeholder Multiselect"
+      />
+    </Stack>
+  );
+}
diff --git a/src/mantine-core/src/MultiSelect/MultiSelect.styles.ts b/src/mantine-core/src/MultiSelect/MultiSelect.styles.ts
index 9117c0c0151..195405e634d 100644
--- a/src/mantine-core/src/MultiSelect/MultiSelect.styles.ts
+++ b/src/mantine-core/src/MultiSelect/MultiSelect.styles.ts
@@ -17,8 +17,6 @@ export default createStyles((theme, { size, invalid }: MultiSelectStylesParams)
     alignItems: 'center',
     flexWrap: 'wrap',
     marginLeft: -theme.spacing.xs / 2,
-    paddingTop: theme.spacing.xs / 2 - 2,
-    paddingBottom: theme.spacing.xs / 2 - 2,
     boxSizing: 'border-box',
   },
 
@@ -27,6 +25,7 @@ export default createStyles((theme, { size, invalid }: MultiSelectStylesParams)
   },
 
   searchInput: {
+    ...theme.fn.fontStyles(),
     flex: 1,
     minWidth: 60,
     backgroundColor: 'transparent',
@@ -34,9 +33,10 @@ export default createStyles((theme, { size, invalid }: MultiSelectStylesParams)
     outline: 0,
     fontSize: theme.fn.size({ size, sizes: theme.fontSizes }),
     padding: 0,
-    margin: theme.spacing.xs / 2,
+    marginLeft: theme.spacing.xs / 2,
     appearance: 'none',
     color: 'inherit',
+    lineHeight: `${theme.fn.size({ size, sizes: INPUT_SIZES }) - 2}px`,
 
     '&::placeholder': {
       opacity: 1,