From 5ca24fde024af57c04682f4d1c0bccd05af2b783 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Thu, 23 Jan 2025 15:48:06 +0100
Subject: [PATCH] AutoSizeInput: Improve performance when typing (#99443)

* AutoSizeInput: Fix performance issue

* Add comments

* Fix a little oopsie
---
 packages/grafana-ui/src/components/Input/Input.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/Input/Input.tsx b/packages/grafana-ui/src/components/Input/Input.tsx
index 1240569cb57..09b113cf76b 100644
--- a/packages/grafana-ui/src/components/Input/Input.tsx
+++ b/packages/grafana-ui/src/components/Input/Input.tsx
@@ -64,12 +64,17 @@ export const Input = forwardRef<HTMLInputElement, Props>((props, ref) => {
 
   const theme = useTheme2();
 
-  const styles = getInputStyles({ theme, invalid: !!invalid, width: finalWidth });
+  // Don't pass the width prop, as this causes an unnecessary amount of Emotion calls when auto sizing
+  const styles = getInputStyles({ theme, invalid: !!invalid });
 
   const suffix = suffixProp || (loading && <Spinner inline={true} />);
 
   return (
-    <div className={cx(styles.wrapper, className)} data-testid="input-wrapper">
+    <div
+      className={cx(styles.wrapper, className)}
+      style={{ width: finalWidth ? theme.spacing(finalWidth) : '100%' }} // Override emotion styles for the width prop
+      data-testid="input-wrapper"
+    >
       {!!addonBefore && <div className={styles.addon}>{addonBefore}</div>}
       <div className={styles.inputWrapper}>
         {prefix && (
@@ -125,7 +130,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false, width }:
       css({
         label: 'input-wrapper',
         display: 'flex',
-        width: width ? theme.spacing(width) : '100%',
+        width: width ? theme.spacing(width) : '100%', // Not used in Input, as this causes performance issues with auto sizing
         height: theme.spacing(theme.components.height.md),
         borderRadius: theme.shape.radius.default,
         '&:hover': {