[@mantine/core] MultiSelect: Fix incorrect line-height styles (Window…

…s 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/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>
+  );
+}

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,16 +25,18 @@ export default createStyles((theme, { size, invalid }: MultiSelectStylesParams)
   },
 
   searchInput: {
+    ...theme.fn.fontStyles(),
     flex: 1,
     minWidth: 60,
     backgroundColor: 'transparent',
     border: 0,
     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,