diff --git a/e2e/various-suite/loki-query-builder.spec.ts b/e2e/various-suite/loki-query-builder.spec.ts index 1707a32dd85..45b527fca5b 100644 --- a/e2e/various-suite/loki-query-builder.spec.ts +++ b/e2e/various-suite/loki-query-builder.spec.ts @@ -72,9 +72,9 @@ describe('Loki query builder', () => { // Add labels to remove error e2e.components.QueryBuilder.labelSelect().should('be.visible').click(); // wait until labels are loaded and set on the component before starting to type - e2e.components.QueryBuilder.labelSelect().children('div').children('input').type('i'); + e2e.components.QueryBuilder.inputSelect().type('i'); cy.wait('@labelsRequest'); - e2e.components.QueryBuilder.labelSelect().children('div').children('input').type('nstance{enter}'); + e2e.components.QueryBuilder.inputSelect().type('nstance{enter}'); e2e.components.QueryBuilder.matchOperatorSelect() .should('be.visible') .click({ force: true }) diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts index a2142e464fb..9d73f68f3ff 100644 --- a/packages/grafana-e2e-selectors/src/selectors/components.ts +++ b/packages/grafana-e2e-selectors/src/selectors/components.ts @@ -452,6 +452,7 @@ export const Components = { QueryBuilder: { queryPatterns: 'data-testid Query patterns', labelSelect: 'data-testid Select label', + inputSelect: 'data-testid Select label-input', valueSelect: 'data-testid Select value', matchOperatorSelect: 'data-testid Select match operator', }, diff --git a/packages/grafana-ui/src/components/Select/CustomInput.tsx b/packages/grafana-ui/src/components/Select/CustomInput.tsx new file mode 100644 index 00000000000..5531b314ec2 --- /dev/null +++ b/packages/grafana-ui/src/components/Select/CustomInput.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { components, InputProps } from 'react-select'; + +/** + * Custom input component for react-select to add data-testid attribute + */ +export const CustomInput = (props: InputProps) => { + let testId; + + if ('data-testid' in props.selectProps && props.selectProps['data-testid']) { + testId = props.selectProps['data-testid'] + '-input'; + } + + return ; +}; diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx index 487f1a118ea..a762fd6a9a4 100644 --- a/packages/grafana-ui/src/components/Select/SelectBase.tsx +++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx @@ -11,6 +11,7 @@ import { useTheme2 } from '../../themes'; import { Icon } from '../Icon/Icon'; import { Spinner } from '../Spinner/Spinner'; +import { CustomInput } from './CustomInput'; import { DropdownIndicator } from './DropdownIndicator'; import { IndicatorsContainer } from './IndicatorsContainer'; import { InputControl } from './InputControl'; @@ -330,6 +331,7 @@ export function SelectBase({ SelectContainer, MultiValueContainer: MultiValueContainer, MultiValueRemove: !disabled ? MultiValueRemove : () => null, + Input: CustomInput, ...components, }} styles={selectStyles}