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

@@ -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"],

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}

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>
     );

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