(autocomplete) consistent input height between multi/single input (#787)

Making consistent height between multi/single input autocomplete.

packages/loot-design/src/components/autocomplete-styles.js

@@ -62,13 +62,22 @@ const colourStyles = {
     padding: '3px 20px',
     fontSize: 13,
   }),
-  valueContainer: styles => ({ ...styles, padding: 'none' }),
+  valueContainer: (styles, { isMulti, selectProps }) => ({
+    ...styles,
+    padding: 'none',
+    overflow: 'visible',
+    marginTop: isMulti && selectProps.value?.length ? -4 : undefined,
+    marginBottom: isMulti && selectProps.value?.length ? -4 : undefined,
+  }),
   clearIndicator: styles => ({
     ...styles,
     padding: 'none',
     '> svg': { height: 15, width: 15 },
   }),
-  multiValue: styles => ({ ...styles, backgroundColor: colors.b9 }),
+  multiValue: styles => ({
+    ...styles,
+    backgroundColor: colors.b9,
+  }),
 };
 
 export default colourStyles;

upcoming-release-notes/787.md

+---
+category: Bugfix
+authors: [MatissJanis]
+---
+
+New autocomplete: making consistent height between multi/single value inputs