Select: Add data-testid to Input (#87105)

* Select: Add custom input component

* Forward data-testid

* Add input selector

* Props check

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

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',
   },

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 <components.Input {...props} data-testid={testId} />;
+};

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<T, Rest = {}>({
           SelectContainer,
           MultiValueContainer: MultiValueContainer,
           MultiValueRemove: !disabled ? MultiValueRemove : () => null,
+          Input: CustomInput,
           ...components,
         }}
         styles={selectStyles}