What is the best way to remove the underline in Material-UI while still keeping the selection feature intact in Autocomplete?

Seeking to develop an Autocomplete feature with the TextField component while eliminating the underline. I successfully disabled the underline by utilizing

InputProps={{ disableUnderline: true }}
in the TextField properties, however, it also eliminated the selection bar. How can I achieve this without removing the selection bar?

Answer №1

In order to re-enable the dropdown list, you must also spread all provided props in the nested property (InputProps). Replace the following line:

<TextField {...params} InputProps={{ disableUnderline: true }} />

With:

<TextField {...params} InputProps={{ ...params.InputProps, disableUnderline: true }} />

Here is the full working code example:

<Autocomplete
  options={top100Films}
  getOptionLabel={(option) => option.title}
  style={{ width: 300 }}
  renderInput={(params) => (
    <TextField
      {...params}
      InputProps={{ ...params.InputProps, disableUnderline: true }}
      label="Combo box"
    />
  )}
/>

Check out the Live Demo here:

https://codesandbox.io/s/67142906how-can-i-disable-underline-in-material-ui-without-removing-the-selection-in-aut-gk5b0?file=/demo.tsx

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

Implementing file uploads using AJAX in CodeIgniter will continue to run, even if the value is null or undefined

I need to trigger another ajax request if the file has not been input yet. However, it is currently still carrying out the form action. Below is my view code: <form method="POST" id="quiz_file" action="<?php echo site_url('home/upload_quiz/&ap ...

Numerous textareas fail to function properly according to JQuery's standards

Need help with resizing multiple textarea elements dynamically as the user types in them (on the Y-axis). Currently, I have code that successfully resizes a single textarea, but it does not work when there are multiple textareas on the page. Here is the c ...

The attempt to access 'reading params' is resulting in an error due to undefined properties

Looking for some assistance in resolving an error I'm encountering. Below is a snippet of my code: const ProductScreen = ({match, history}) => { const [qty, setQty] = useState(1); const dispatch = useDispatch(); const productDetail ...

Styling the "Browse" button for different web browsers

Here is the code snippet I am working with: HTML: <form> <input id = "file" type="file" /> <div id="custom_button">custom button</div> </form> Jquery: $("#custom_button").on("click", function () { $("#file"). ...

I'm encountering an issue with the "z-index: -1" property in React

After creating a form placed alongside buttons, I encountered an issue where the form overlaps the buttons and prevents them from being clicked. Despite setting the z-index to -1, it seems that the form remains clickable even when not visible. Research ind ...

How can I incorporate a fade opacity effect into my Div scrolling feature?

I successfully implemented code to make div elements stick at the top with a 64px offset when scrolling. Now, I am trying to also make the opacity of these divs fade to 0 as they scroll. I am struggling to figure out how to achieve this effect. Below is ...

Is it possible to utilize the node package ssh2 within a web browser environment?

I am working on a project for school where I am creating an SFTP client directly in my browser. I have successfully implemented the node package ssh2 and it works perfectly when running the code in the terminal. I can connect to the server, read directorie ...

Electron's start script leads to project failure

Despite extensively searching the internet for a solution, I have yet to find a definitive answer that actually works. My last resort was downloading the example from Electron's website and directly inserting the scripts into my project. However, whe ...

Getting the text value from a table in JavaScript is a straightforward process. By using

I am working with a table displaying available hotel rooms and want to change the text color to green if the room is marked as "available." Is there a way to check the innerHTML of a td element to see if it contains the word "available"? var status = do ...

Moving Angularjs table rows to another tableMoving table row from one Angular

I need a solution for transferring rows from one table to another. Here are the two tables involved: First Table: <table> <tr ng-repeat="row in items"> <td>{{row.PRODUCTDESCRIPTION}}</td> <td><inpu ...

What are the steps to create a shadow effect on a bar chart in ChartJs?

Currently, I am utilizing version 3.9 of chartjs to construct a bar chart. My goal is to incorporate a shadow effect on the bars resembling the image in this link: https://i.sstatic.net/SGIrO.png Despite my efforts, I have not been able to locate instruc ...

Is there a way to change HTML retrieved from an AJAX request before inserting it into the document?

I am utilizing an ajax call to retrieve an HTML page from the server; the ajax call is structured as follows: function loadHtml() { $.ajax({ type : 'GET', async : false, url : &apos ...

Troubleshooting Issue with Formidable Not Working with Multer

Attempting to develop a webpage that enables users to upload a file to a designated folder while specifying a number in an input field. Currently, I am navigating through the Multer library despite typically using body-parser. Referencing both my app.js an ...

Increase the Z-Index of the Header above the Material UI Modal Background

Currently, I'm in the process of developing a mobile version of a web application using Material UI. However, I am encountering some challenges when it comes to matching the designs accurately. My approach involves utilizing the MUI App-Bar in conjunc ...

Finding the automatically generated ID of a new document in a subcollection in Firebase Firestore Web V9, using Javascript/React

When a user clicks, I generate a new document in a subcollection associated with that user's profile. Below is the function responsible for this: // Function to create a new checkout session document in the subcollection under the user's profile ...

Exploring the possibilities of developing WebComponents within Angular using TypeScript

My Angular application was originally created using the default method with ng new project-name". However, for performance reasons, I had to incorporate single standard WebComponents. The JavaScript code associated with these components is stored in a ...

What is the best way to transfer an array made in JavaScript to a different JSP and subsequently utilize that array in a Java function within that JSP?

I have a script that needs to pass an array called "playernames" to a Java function on another .jsp. I'm looking for guidance on how to send this array to the other page and then retrieve it for my Java function. <script> function getPlayerName ...

Display the image before submitting it on Shiny platform

I'm currently developing a Shiny app that enables users to upload images directly to the server. I am wondering if there is a way to display the image on the screen without going through the process of uploading it first and then receiving the rendere ...

The installation of package.json is unsuccessful, as it will only proceed with an empty name and version

Having trouble installing the package.json file after updating to the latest version of Node on my Windows PC. When trying to run npm, an error was thrown. Any help would be greatly appreciated. Command Prompt C:\Users\Felix\Desktop\ ...

Steps for creating an HTML report using Intern JS

Our team relies on intern JS for automating functional tests, however we are facing difficulty in generating an html report. I attempted to use locvhtml as suggested by the Intern documentation (https://theintern.github.io/intern/#reporter-lcov), but unfo ...