From 1b8ba66a740ee813adb623215e8eac0e0cc0f131 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= <vmilan@cartodb.com>
Date: Fri, 7 Jun 2024 08:51:55 +0200
Subject: [PATCH] startAdornment

---
 .../components/molecules/Autocomplete.d.ts    |  3 +++
 .../src/components/molecules/Autocomplete.js  | 24 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/react-ui/src/components/molecules/Autocomplete.d.ts b/packages/react-ui/src/components/molecules/Autocomplete.d.ts
index 56968b321..51b17daea 100644
--- a/packages/react-ui/src/components/molecules/Autocomplete.d.ts
+++ b/packages/react-ui/src/components/molecules/Autocomplete.d.ts
@@ -10,6 +10,9 @@ export type AutocompleteProps<
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']
 > = MuiAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent> & {
   creatable?: boolean;
+  newItemTitle?: React.ReactNode | string;
+  startAdornment?: React.ReactNode;
+  inputParams?: object;
 };
 
 declare const Autocomplete: <
diff --git a/packages/react-ui/src/components/molecules/Autocomplete.js b/packages/react-ui/src/components/molecules/Autocomplete.js
index 7d03b3551..5e0a1d558 100644
--- a/packages/react-ui/src/components/molecules/Autocomplete.js
+++ b/packages/react-ui/src/components/molecules/Autocomplete.js
@@ -1,8 +1,10 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import {
+  InputAdornment,
   MenuItem,
   Autocomplete as MuiAutocomplete,
+  TextField,
   createFilterOptions
 } from '@mui/material';
 
@@ -18,6 +20,8 @@ const Autocomplete = forwardRef(
       forcePopupIcon,
       filterOptions,
       getOptionLabel,
+      startAdornment,
+      inputParams,
       ...otherProps
     },
     ref
@@ -65,6 +69,22 @@ const Autocomplete = forwardRef(
         renderOption={creatable ? creatableRenderOption : renderOption}
         freeSolo={creatable || freeSolo}
         forcePopupIcon={creatable || forcePopupIcon}
+        renderInput={(params) => {
+          if (startAdornment) {
+            params.InputProps.startAdornment = (
+              <InputAdornment position='start'>{startAdornment}</InputAdornment>
+            );
+          }
+          return (
+            <div ref={params.InputProps.ref}>
+              <TextField
+                {...params}
+                {...inputParams}
+                InputLabelProps={{ shrink: true }}
+              />
+            </div>
+          );
+        }}
       />
     );
   }
@@ -72,7 +92,9 @@ const Autocomplete = forwardRef(
 
 Autocomplete.propTypes = {
   creatable: PropTypes.bool,
-  newItemTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+  newItemTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  startAdornment: PropTypes.element,
+  inputParams: PropTypes.object
 };
 
 export default Autocomplete;