startAdornment

CartoDB · Jun 7, 2024 · 1b8ba66 · 1b8ba66
1 parent 5d127b1
commit 1b8ba66
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git 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
@@ -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,14 +69,32 @@ 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>
+          );
+        }}
       />
     );
   }
 );
 
 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;