From 18216a9a154623b4fe38ffbd0c88431f0c189e6c Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Wed, 28 May 2025 14:17:59 +0200
Subject: [PATCH] Select: Set min width for the current selected item when
 width=auto (#106131)

* Set min width when width=auto

* add prop types for ValueContainer

* Update betterer

---------

Co-authored-by: joshhunt <josh.hunt@grafana.com>
---
 .betterer.results                             |  3 --
 .../src/components/Select/SelectBase.tsx      |  1 +
 .../src/components/Select/ValueContainer.tsx  | 35 +++++++++++++++++--
 .../grafana-ui/src/components/Select/types.ts |  7 ++--
 4 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index ee6ca47ec3d..96b03ea2ab5 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -648,9 +648,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "5"]
     ],
-    "packages/grafana-ui/src/components/Select/ValueContainer.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "packages/grafana-ui/src/components/Select/resetSelectStyles.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx
index 1c5b7f3d913..99408d2fe26 100644
--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -398,6 +398,7 @@ export function SelectBase<T, Rest = {}>({
         }
         styles={selectStyles}
         className={className}
+        autoWidth={width === 'auto'}
         {...commonSelectProps}
         {...creatableProps}
         {...asyncSelectProps}
diff --git a/packages/grafana-ui/src/components/Select/ValueContainer.tsx b/packages/grafana-ui/src/components/Select/ValueContainer.tsx
index 303217009ec..aa5cec83c19 100644
--- a/packages/grafana-ui/src/components/Select/ValueContainer.tsx
+++ b/packages/grafana-ui/src/components/Select/ValueContainer.tsx
@@ -1,13 +1,42 @@
 import { cx } from '@emotion/css';
-import { Component, ReactNode } from 'react';
+import { isEqual } from 'lodash';
+import { Component, createRef, ReactNode } from 'react';
+import { ValueContainerProps as BaseValueContainerProps, type GroupBase } from 'react-select';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
 import { withTheme2 } from '../../themes/ThemeContext';
 
 import { getSelectStyles } from './getSelectStyles';
+import type { CustomComponentProps } from './types';
+
+type ValueContainerProps<Option, isMulti extends boolean, Group extends GroupBase<Option>> = BaseValueContainerProps<
+  Option,
+  isMulti,
+  Group
+> &
+  CustomComponentProps<Option, isMulti, Group>;
+
+class UnthemedValueContainer<Option, isMulti extends boolean, Group extends GroupBase<Option>> extends Component<
+  ValueContainerProps<Option, isMulti, Group> & { theme: GrafanaTheme2 }
+> {
+  private ref = createRef<HTMLDivElement>();
+
+  componentDidUpdate(prevProps: ValueContainerProps<Option, isMulti, Group>) {
+    if (
+      this.ref.current &&
+      this.props.selectProps.autoWidth &&
+      !isEqual(prevProps.selectProps.value, this.props.selectProps.value)
+    ) {
+      // Reset in order to measure the new width
+      this.ref.current.style.minWidth = '0px';
+
+      const width = this.ref.current.offsetWidth;
+
+      this.ref.current.style.minWidth = `${width}px`;
+    }
+  }
 
-class UnthemedValueContainer extends Component<any & { theme: GrafanaTheme2 }> {
   render() {
     const { children } = this.props;
     const { selectProps } = this.props;
@@ -39,7 +68,7 @@ class UnthemedValueContainer extends Component<any & { theme: GrafanaTheme2 }> {
     });
 
     return (
-      <div data-testid={dataTestid} className={className}>
+      <div ref={this.ref} data-testid={dataTestid} className={className}>
         {children}
       </div>
     );
diff --git a/packages/grafana-ui/src/components/Select/types.ts b/packages/grafana-ui/src/components/Select/types.ts
index e31aee53d5a..3512ab9fbee 100644
--- a/packages/grafana-ui/src/components/Select/types.ts
+++ b/packages/grafana-ui/src/components/Select/types.ts
@@ -190,9 +190,10 @@ export type ReactSelectProps<Option, IsMulti extends boolean, Group extends Grou
   Option,
   IsMulti,
   Group
->['selectProps'] & {
-  invalid: boolean;
-};
+>['selectProps'] &
+  SelectCommonProps<Option> & {
+    autoWidth: boolean;
+  };
 
 // Use this type when implementing custom components for react select.
 // See SelectContainerProps in SelectContainer.tsx