From 1ce7f84b2e88fbd5461ee398baf8e03a68b264ba Mon Sep 17 00:00:00 2001
From: Renan Mendes Carvalho <aitherios@gmail.com>
Date: Mon, 8 May 2023 12:51:41 +0200
Subject: [PATCH] feature(plugin-search-react): Extend InputProps on
 <SearchBar/>

In the current implementation of <SearchBar/> it is possible to
overwrite the default <TextField/> InputProps by passing a prop of the
same name. But sometimes is necessary to extend only, for example when
one is interested on changing the clear button only.
The clear button is supplied in the endAdornment, part of the
InputProps, but at the same time the startAdornment is also on it.
To be able to replace the clear button implementation without affecting
the rest, this patch proposes a change where `InputProps` is exposed in
the same manner as `inputProps` (notice the change from capital I to i).
Where the received object may overwrite keys using the spread operator.

Signed-off-by: Renan Mendes Carvalho <aitherios@gmail.com>
---
 .changeset/ninety-mugs-sin.md                              | 5 +++++
 .../src/components/SearchBar/SearchBar.stories.tsx         | 7 ++++++-
 .../search-react/src/components/SearchBar/SearchBar.tsx    | 6 ++++--
 3 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/ninety-mugs-sin.md

diff --git a/.changeset/ninety-mugs-sin.md b/.changeset/ninety-mugs-sin.md
new file mode 100644
index 0000000000..6b71a00667
--- /dev/null
+++ b/.changeset/ninety-mugs-sin.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-search-react': minor
+---
+
+<SearchBar/> accepts InputProp property that can override keys from default
diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx
index 559ae1776e..7e97d790a7 100644
--- a/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx
+++ b/plugins/search-react/src/components/SearchBar/SearchBar.stories.tsx
@@ -92,13 +92,18 @@ const useStyles = makeStyles({
     borderRadius: '50px',
     margin: 'auto',
   },
+  notchedOutline: {
+    borderStyle: 'none',
+  },
 });
 
 export const CustomStyles = () => {
   const classes = useStyles();
   return (
     <Paper className={classes.search}>
-      <SearchBar />
+      <SearchBar
+        InputProps={{ classes: { notchedOutline: classes.notchedOutline } }}
+      />
     </Paper>
   );
 };
diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.tsx
index 913f515aaa..cfd0538694 100644
--- a/plugins/search-react/src/components/SearchBar/SearchBar.tsx
+++ b/plugins/search-react/src/components/SearchBar/SearchBar.tsx
@@ -80,7 +80,8 @@ export const SearchBarBase: ForwardRefExoticComponent<SearchBarBaseProps> =
         value: defaultValue,
         label,
         placeholder,
-        inputProps: defaultInputProps = {},
+        inputProps = {},
+        InputProps = {},
         endAdornment,
         ...rest
       } = props;
@@ -168,10 +169,11 @@ export const SearchBarBase: ForwardRefExoticComponent<SearchBarBaseProps> =
               endAdornment: clearButton
                 ? clearButtonEndAdornment
                 : endAdornment,
+              ...InputProps,
             }}
             inputProps={{
               'aria-label': ariaLabel,
-              ...defaultInputProps,
+              ...inputProps,
             }}
             fullWidth={fullWidth}
             onChange={handleChange}