Enhancing the appearance of list options in Autocomplete Material UI by utilizing the renderOption feature

I'm putting in a lot of effort to customize the option elements in the autocomplete list. My plan is to achieve this using the renderOptions prop, where I can create DOM elements and easily apply styles with sx or styled components.

However, something seems off. When I attempt to render the options list elements wrapped in divs, the movie names are mysteriously hidden. They do get rendered because I can still select an option, which then appears as selected. But the input list remains broken, and CSS styles aren't being applied properly.

What am I overlooking? Autocomplete and its styling are relatively new concepts for me.

Here's the code:

<Autocomplete
        freeSolo
        id="free-solo-2-demo"
        disableClearable
        options={top100Films.map((option) => option.title)}
        renderOption={(props, option) => {
          return (
            <li {...props}>
              <div
                sx={{
                  backgroundColor: "red",
                  color: "orange"
                }}
              >
                {option.title}
              </div>
            </li>
          );
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Search input"
            InputProps={{
              ...params.InputProps,
              type: "search"
            }}
          />
        )}
      />
    </Stack>
  );
}

Here's the demo : https://codesandbox.io/s/freesolo-material-demo-forked-dupxol?file=/demo.js

Answer №1

Summary To fix the issue, simply replace option.title with just option in the renderOption prop. Additionally, switch from using a regular div to MUI's Box component for styling purposes.

Although not explicitly mentioned in the documentation, each element passed to options is then accessed as the option argument within the renderOption function.

Since you are passing an array of option.title strings to options, you should refer to them solely as option within the renderOption prop.

The sx prop is specific to MUI components, hence replacing the regular div with a MUI Box component in the renderOption function is recommended. The Box component was designed precisely for scenarios like this.

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

Tips for utilizing Plunker or JSFiddle to execute Angular2 code

I've been attempting to practice coding programs in Angular 2 using plnkr and jsfiddle. However, every time I try to run them, I encounter issues such as 404 errors or exceptions when I check the developer tools. Can anyone advise on the correct metho ...

Configuring cloud code on Back4App to automatically trigger a POST API request to update the ESP

I am a beginner when it comes to developing APIs and cloud code, and I need help figuring out how to create an API that can add or update users in my back4app database table to my sendinblue (ESP) contact list. Could someone provide guidance on what shoul ...

What are some recommended techniques for retrieving data following a post request in a Node.js environment?

I have a form in Node where I can input user information. After submitting the form, a post request is triggered to add the user to the database. How can I efficiently fetch the data to display a new list of users on the user list? Should I include a get ...

Resetting an MUI input field to null from a location external to the React component

My parent component contains a filter component and a delete button. I am trying to make it so that when the "reset" button is clicked, the input value of the filter component resets to null. This parent component houses multiple Material UI components. ...

Text font automatically adjusts size in Chrome on Android

It seems that when a paragraph of text reaches a certain length, Google Chrome on Android decides to resize the text and make it larger (which can cause some interesting results). I've noticed that on my website, about half of the p-tags stick to the ...

The process of uploading a file is interrupted by an AJAX Timeout

My HTML form includes a file input field that utilizes AJAX to upload the selected file, complete with a progress bar. However, I encountered an issue where the request would hang without any response. To prevent this from happening in the future, I aim t ...

I am currently facing a challenge with Bootstrap, as I am trying to design a webpage for small devices using a 1:4:1 format, but I am struggling to get it right

column 1 and column 3(left and right cols) have successfully passed the test case, but not column 2 (the middle one) that I have commented on in the code. Please help. Thank you. The problem has certain conditions that would have been easier to understa ...

The backend API does not receive the correct value from the checkbox

I'm having an issue with my registration page in ReactJS. There is a checkbox field called isadult. After clicking on the Register button and saving the data to a MongoDB database, the value of isadult shows up as [Object object] instead of True or Fa ...

How to use getServerSideProps in Next.js

In my current scenario, I find myself within a folder in the pages directory, specifically in a file named [id].jsx. My goal is to make getServerSideProps return just the name of the page, for example /page/id123 should return id123. import Link from &a ...

Is it possible to utilize Babel for transpiling, importing, and exporting in the client, all without relying on Web

Is it possible to compile JSX and export variables through the global namespace using Babel? I'm not interested in setting up a Webpack server. I'm currently familiarizing myself with ES6, JSX, Babel, and React, and I find adding another librar ...

Manipulating HTML content with jQuery

Review the code snippet provided below <div id="post-1234"> <h3><a href="some link">text</a></h3> <div> <div> <div> <span class"Event-Date">Event Date 1</span> </div> < ...

Obtain a collection of information from a web API by utilizing jQuery

Click on the following link to access live data from a web API: This is my first attempt at retrieving data from an API, so I may have missed some settings. To test the connection with the API, I included the following code in the HTML page: <div id= ...

How come I am able to send back several elements in react without the need to enclose them in a fragment

This piece of code is functioning properly in React, displaying all the names on the page. However, I am questioning why it is returning multiple elements as a React component. Shouldn't they be wrapped in a single fragment? function App() { const n ...

Error encountered: Unable to assign onClick property to null object

Hey everyone, I'm running into an issue with my JavaScript. It keeps throwing a TypeError: Cannot set properties of null (setting 'onclick') at SignUp.js:4:43 <HTML> <body> <div class="input-box"> <span class="deta ...

Discrepant alignment of form group among the other elements in Bootstrap CSS

Currently, I'm working on an HTML horizontal form that includes buttons and text inputs. I'm using Bootstrap 3 for this project. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> <fo ...

Troubleshooting: Angular version 4.3 Interceptor malfunctioning

I have been trying to implement new interceptors in Angular 4.3 to set the authorization header for all requests, but it doesn't seem to be working. I placed a breakpoint inside the interceptor's 'intercept' method, but the browser didn ...

Is the presence of a potential leak suggested by this arrangement in the heap snapshot retainer hierarchy

While analyzing a Heap snapshot, I came across a retainer hierarchy that looks like this: https://i.sstatic.net/Zg3bJ.png Is it possible that the MuiThemeProviderOld element (highlighted in yellow and from the @material-ui/core library) is causing a memo ...

CoffeeScript is failing to run the code

I'm attempting to use a click function to alter the CSS code and then run a function. Here is my current code: ready: -> $("#titleDD").click -> $("#titleDD").css('text-decoration', 'underline'); $("#catDD").css( ...

Sign up for our Joomla website by completing the registration form and agreeing to our terms and conditions

I am currently working with Joomla 1.5 and I need to incorporate a checkbox for users to agree to the terms and conditions. I attempted to use the code below, but it is not functioning as expected. Even when the checkbox is ticked, it still triggers an a ...

Experimenting with altering the heights of two Views using GestureHandler in React Native

I am currently working on a project where I need to implement height adjustable Views using React Native. One particular aspect has been causing me some trouble. I'm trying to create two stacked Views with a draggable line in between them so that the ...