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({ } 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> = BaseValueContainerProps< + Option, + isMulti, + Group +> & + CustomComponentProps; + +class UnthemedValueContainer> extends Component< + ValueContainerProps & { theme: GrafanaTheme2 } +> { + private ref = createRef(); + + componentDidUpdate(prevProps: ValueContainerProps) { + 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 { render() { const { children } = this.props; const { selectProps } = this.props; @@ -39,7 +68,7 @@ class UnthemedValueContainer extends Component { }); return ( -
+
{children}
); 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['selectProps'] & { - invalid: boolean; -}; +>['selectProps'] & + SelectCommonProps