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}