Using React Material UI icon within an auto complete feature

https://i.stack.imgur.com/W3CmF.png

I am struggling to incorporate the target icon into the autoComplete component. After reviewing the documentation, I have been unable to find a solution.

In TextInput, a similar outcome can be achieved by implementing the following:

<TextField
    className={classes.margin}
    id='input-with-icon-textfield'
    label='TextField'
    InputProps={{
        startAdornment: (
            <InputAdornment position='start'>
                <AccountCircle />
            </InputAdornment>
        )
    }}
/>

Is there a way to insert the target icon inside the autoComplete component? Here is my code sandbox link for reference.

Any assistance would be greatly appreciated! Thank you in advance! =)

javascriptcssreactjsmaterial-ui

Answer №2

If you want to customize the style, you can do so using CSS. Here's an example:

...
renderInput={(params) => (
 <div>
  <i className={classes.icon} /> // Icon styling
  <TextField
   {...params}
   label="Enter text"
   variant="outlined"
   fullWidth
  />
 </div>
)}
...

In your useStyles function:

const useStyles = makeStyles((theme) => ({
  ...
  icon: {
    position: "absolute",
    top: "3%"
  }
}));

You can check out the modified code here.

Answer №3

When using <code>Autocomplete, it is important to pass the InputProps from Autocomplete to the corresponding TextField.

<Autocomplete
    renderInput={(params) =>
        <TextField
            {...params}
            label={'TextField'}
            InputProps={{
                ...params.InputProps,
                startAdornment: (
                    <InputAdornment position="start">
                        <AccountCircle />
                    </InputAdornment>
                ),
            }}
        />
    }
/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing Google Maps API v3: Utilizing Custom Images as symbolPath Instead of Default Symbols

Recently, I discovered the fascinating feature called Symbol Animation in Google API's documentation. All aspects of my code are functioning optimally; however, I am curious to know if it is possible to substitute an image for a symbol in the followi ...

javascriptjquerygoogle-mapsgoogle-maps-api-3google-maps-markers

What is preventing me from accessing session data using nuxtServerInit?

When attempting to retrieve sessions, I encounter an issue. Is everything set up correctly in the following main files: server, config? store/index.js export const actions = { nuxtServerInit ({ commit }, { req }) { console.log(req); } The console log ...

javascriptvue.jsvuexnuxt.js

Encountering an issue when bundling an application using electron-forge: "Unable to find solution for './→' "

Having trouble packaging my Electron application using electron-forge. It seems like the issue lies with native modules such as 'sqlite3'. Upon running the command npm run package, I encounter this error: Module not found: Error: Can't reso ...

javascriptnode.jswebpackelectronelectron-forge

Ways to access a global JavaScript object in a separate .js file

How can I access an object that was initialized in my HTML document? This is what my HTML document looks like: ... <script type="text/javascript" id="controller">var controller = false;</script> ... <body onload="controller = ne ...

javascript

Guide on retrieving a value from a function that invokes $.getJSON

function searchAndRetrieve(searchTerm) { var defaultResult = 1010; var resultValue = defaultResult; $.getJSON(remote, function(data) { if (data != null) { $.each(data.items, function(i, item) { ...

javascriptjqueryreturn-valuegetjson

Error functions in Angular HTTP Interceptor are not being triggered

I followed the example code for an interceptor from the Angular HTTP documentation, but I am having trouble getting the "requestError" and "responseError" functions to trigger. The "request" and "response" functions are working as expected. myApp.config([ ...

javascriptangularjshttpexpress

Two approaches for one single object

I'm trying to figure out why this particular code works // ....................................................... var character = { name: 'Joni', type: 'blond', sayName: function() { return this.name; }, sayT ...

javascript

React Native - Listview triggering multiple refreshes when pulled down

As I attempt to implement the onScroll function for ListView to detect when a user has pulled the list down beyond a certain pixel value in order to trigger an AJAX call and refresh the list, I am facing an issue where it fires multiple times leading to a ...

javascriptajaxlistviewreact-native

Error: HTMLAnchorElement.linkAction is attempting to access an undefined property 'add', resulting in an uncaught TypeError

Displaying the following: Error: Cannot read property 'add' of undefined at HTMLAnchorElement.linkAction const navigationLinks = document.querySelectorAll('.nav__link') function handleLinkAction(){ // Activate link navLin ...

javascriptfunction

The card-img-overlay in Bootstrap 5 seamlessly integrates into the following div container

Currently, I am in the process of creating a painting website layout for my CS50 homepage. However, there seems to be an issue with the background-color: rgba(0,0,0,0.7); not aligning correctly with the images within the card-group. <div class="car ...

htmlcssbootstrap-5cs50

A mysterious underscore suddenly materializes within Font Awesome icons when used in HTML

Currently, I'm working on the footer section of a webpage using HTML and Bootstrap 5.3.0. I encountered an issue where an underscore appears next to the icons when I add them. I suspect that this is due to the white spaces between the elements, which ...

htmlcssfont-awesomebootstrap-5

Adding JSON data to an array for Flot Diagram

I've been struggling with the task of organizing data into an array. The existing temp array is structured as follows: tmp[0][0] = "NY" tmp[0][1] = "52" tmp[1][0] = "FL" tmp[1][1] = "25" My goal is to transfer this data into a new array called data. ...

javascriptjqueryflot

Scrollable Turbo Table experiencing a problem with the PrimeNG filter dropdown

When using PrimeNG Turbo Table, I am facing an issue where the filter dropdown is getting placed inside the scrollable table. The dropdown works perfectly fine without the scrollable table. You can see it in action here. However, when the table is scroll ...

cssangularangular5primengprimeng-turbotable

Organizing dates with Javascript

Is there a way to convert a string from this format : 2014-06-12T23:00:00 To another format using JavaScript, like so : 12/06/2014 23:00 ...

javascript

Printing feature not functioning properly on Internet Explorer version 11

Currently, I am facing an issue with printing a document using a blob URL and iFrame. Everything works perfectly in Chrome, but unfortunately, it's not functioning properly in IE browser. I need guidance on how to successfully print a blob URL that i ...

javascriptangularfileblob

What is the reason that setting margin to 0 auto centers an element, while using margin 1 auto does not have the same effect?

When using margin: 0 auto;, it means that there is a margin size of 0 on the top and bottom of the element, with the available space being divided equally for the left and right margins. This behavior works as expected in the example below. In contrast, c ...

css

Utilize the double parsing of JSON information (or opt for an alternative technique for dividing the data

Looking for the most effective approach to breaking down a large data object retrieved from AJAX. When sending just one part (like paths), I typically use JSON.parse(data). However, my goal is to split the object into individual blocks first and then parse ...

javascriptjsonajax

Transform website code into email-friendly HTML code

Is there any software available that can convert web HTML and CSS files to email HTML with inline CSS? This would allow the email to be viewable on various email clients such as Outlook, Thunderbird, Gmail, Yahoo, Hotmail, etc. I want to write my code lik ...

htmlcssxhtmlnewsletter

What methods can be used to reverse an animation when closing it?

Background : I recently developed a versatile component called Panel that showcases content within a panel located on the right side of the screen. Goal : Upon opening the panel, I successfully implemented a smooth animation from right to left. However, w ...

reactjsanimationreact-spring

What is the proper way to utilize several initialization functions simultaneously?

I have been pondering the concept of using multiple initialization functions and whether it is considered bad practice. When I refer to an initialization function, I am talking about one of the following scenarios: $(document).ready(function(){ //... ...

javascriptjquery