diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx
index d9da187541..54deca5f5d 100644
--- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx
+++ b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx
@@ -74,7 +74,7 @@ describe('SearchAutocomplete', () => {
expect(screen.queryByText(options[1])).not.toBeInTheDocument();
expect(screen.queryByText(options[2])).not.toBeInTheDocument();
- await userEvent.click(screen.getByPlaceholderText(`Search in ${title}`));
+ await userEvent.click(screen.getByLabelText(`Search in ${title}`));
await waitFor(() => {
expect(screen.getByText(options[0])).toBeInTheDocument();
@@ -150,7 +150,7 @@ describe('SearchAutocomplete', () => {
,
);
- await userEvent.click(screen.getByPlaceholderText(`Search in ${title}`));
+ await userEvent.click(screen.getByLabelText(`Search in ${title}`));
await userEvent.click(screen.getByText(options[0]));
@@ -218,7 +218,7 @@ describe('SearchAutocomplete', () => {
,
);
- await userEvent.click(screen.getByPlaceholderText(`Search in ${title}`));
+ await userEvent.click(screen.getByLabelText(`Search in ${title}`));
await waitFor(() => {
expect(screen.getAllByTitle('Option icon')).toHaveLength(3);
diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx
index fba50f74d8..30df27aba7 100644
--- a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx
+++ b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx
@@ -70,9 +70,28 @@ describe('SearchBar', () => {
);
await waitFor(() => {
- expect(
- screen.getByPlaceholderText('Search in Mock title'),
- ).toBeInTheDocument();
+ expect(screen.getByLabelText('Search in Mock title')).toBeInTheDocument();
+ });
+ });
+
+ it('Renders with custom label', async () => {
+ const label = 'label';
+
+ const result = await renderWithEffects(
+
+
+
+
+ ,
+ );
+
+ await waitFor(() => {
+ expect(result.getByLabelText(label)).toBeInTheDocument();
});
});
diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.tsx
index 1be8043b65..72d3559eb0 100644
--- a/plugins/search-react/src/components/SearchBar/SearchBar.tsx
+++ b/plugins/search-react/src/components/SearchBar/SearchBar.tsx
@@ -78,7 +78,7 @@ export const SearchBarBase: ForwardRefExoticComponent =
clearButton = true,
fullWidth = true,
value: defaultValue,
- placeholder: defaultPlaceholder,
+ label: defaultLabel,
inputProps: defaultInputProps = {},
endAdornment: defaultEndAdornment,
...rest
@@ -119,8 +119,8 @@ export const SearchBarBase: ForwardRefExoticComponent =
}
}, [onChange, onClear]);
- const placeholder =
- defaultPlaceholder ??
+ const label =
+ defaultLabel ??
`Search in ${configApi.getOptionalString('app.title') || 'Backstage'}`;
const startAdornment = (
@@ -142,12 +142,13 @@ export const SearchBarBase: ForwardRefExoticComponent =
return (