Hiding both clear buttons in the MUI Autocomplete component on Chromium: A simple guide

The issue with the clear button is specific to Chromium; it does not appear in Firefox.

Take a look at an example of a MUI React Autocomplete component displaying two clear buttons.

Various solutions mentioned in this thread only hide the rightmost button, not the one on the left that I'm trying to hide.

How can I successfully hide the left clear button?

This issue seems to arise when type: 'search' is included in InputProps.

Below is a minimal, reproducible code snippet showcasing this behavior specifically in Chromium Version 110.0.5481.100:

<Autocomplete
  disablePortal
  disableClearable
  id="combo-box-demo"
  options={supported_games}
  sx={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="Movie" InputProps={{ ...params.InputProps, type: 'search'}} />}
/>

https://i.sstatic.net/5Pbsi.jpg

javascriptmaterial-uiautocomplete

Answer №1

To set the default style for input type "search", you can include the following code in the sx props of your TextField component:

sx={{ "input[type='search']::-webkit-search-cancel-button": {
     display: "none",
   }
}}

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

Hiding content in HTML with the Display:none property

After exploring various posts on this topic, I am still unable to find a solution that fits my specific scenario. Despite the challenges, I thought it would be worth asking for recommendations. Currently, I have a PowerShell script generating a report in ...

javascripthtml

Integrating TypeScript into an established create-react-app project

Struggling to integrate TypeScript into an existing create-react-app? I've always added it at the beginning of a project using create-react-app my-app --scripts-version=react-scripts-ts, but that's not working this time. The only "solution" I co ...

javascriptreactjstypescript

Encountering a Typescript error while attempting to utilize mongoose functions

An example of a User interface is shown below: import {Document} from "mongoose"; export interface IUser extends Document{ email: string; password: string; strategy: string; userId: string; isValidPassword(password: string): ...

javascriptnode.jstypescriptexpressmongoose

Step-by-step guide on mocking an asynchronous function in nodejs with jest

Within this function, I need to mock the httpGet function so that instead of calling the actual function and returning its value, it will call a simulated function fetchStudents: async(req,classId) => { let response = await httpGet(req); return r ...

javascriptnode.jsunit-testingmockingjestjs

Cross Domain Requests in Internet Explorer: Preflight not being sent

I have come across several similar discussions but none of the solutions provided have worked for me so far. Issue: In our current setup, we have three servers hosting our http-apis - two for testing and one for production. Lately, we have been deployin ...

javascriptangularjsinternet-explorersslinternet-explorer-11

Having trouble centering buttons inside a box with React Mui framework

Struggling to center the side buttons vertically on an image carousel in my React project. I've tried using alignContent:"center" and justifyContent:"center" in a flexbox, but the buttons won't move. The images are centered fine though. Any help ...

reactjsflexboxmaterial-uialignmentvertical-alignment

Unable to change placeholder in Material UI's Select Form

I'm having trouble modifying my SelectionForm. I need to update the color of the placeHolder image from red to a different color, but I can't find any properties or props on the material ui Docs to do so. Can someone assist me with this? Here is ...

javascriptstylesoverridingmaterial-ui

Performing three consecutive Ajax requests in a Rails application

Recently, I developed a custom admin system for a local gym to manage payments, attendance, mailing, sales, and more. While everything is functioning smoothly, there seems to be an issue with the attendance feature. Occasionally, when taking attendance, an ...

javascriptjqueryruby-on-railsajax

Utilizing LoopBack Storage Service: Leveraging upload/download functions within JavaScript code

Is there a straightforward way to upload and download files using the storageService.upload and storageService.download functions in my JavaScript/Loopback code? I'm trying to achieve something like this: app.post("/sendFile", (req, res) => client ...

javascriptexpressloopbackjs

How can we trigger the Skill bar effect upon scrolling to the section?

I have created a stunning Skill Bar that is functioning perfectly. However, I am looking to enhance the experience by having the skill bar effect trigger only when I scroll to that specific section. For example, as I navigate from the introduction section ...

javascriptjqueryhtmlprogress-bar

Is it necessary to always pause before I click?

Currently, I am in the process of writing tests for my website using WebdriverIO with Mocha and Chai. However, I encountered an issue where my element is not rendered before attempting to interact with it. it('select application', function(done) ...

javascriptselenium-webdriverwebdriver-io

The requested function is nowhere to be found within the confines of my Controller module

While working on a personal project, I encountered an issue where a function from another class in a separate Java file is not being found, even though it is defined in the respective class. EventView.js: displayEvent(event){ this.EventTitle = event. ...

javascript

Is it considered secure to encase a function within jQuery's removeClass()?

I'm currently developing a unique slider that includes a dynamic video element. With each slide transition, a new video is added to the DOM while the previous one is removed. To achieve this effect, I am utilizing CSS transitions along with a specific ...

javascriptjquerycss

Fully responsive header designed for optimal experience at any screen height

I am facing issues with the header and cannot seem to find a solution. My goal is to make the header span 100% of the window screen height. I need a responsive header that adjusts to 100% height, and when resizing for a smaller viewport, nothing should sho ...

javascripthtmlcsstwitter-bootstrap

"Enhancing Collaboration with NextJs Multi-Zones' Unified Header

Currently, I have two applications named admin-shell and delivery-management, both of which are being managed using Multi Zones in NextJs. These applications share a common header with navigation links, but I am encountering difficulties navigating betwee ...

javascriptreactjsnext.jsserver-side-rendering

Prevent automatic jumping to input fields

Can someone help me with a problem related to the html input tag or primefaces p:input? I am facing an issue where the cursor always automatically jumps into the input field. The height of my page is such that scrolling is required, and the input field i ...

javascripthtmlprimefaces

Exploring nested object values in React Js through iteration

I have been searching extensively for a solution to no avail. I have an object created from fetched data with the following structure: { id: string, title: string, price: { currency: string, amount: number, }, ...

javascriptreactjsloopsobjectnested

The loss of Webgl context that remains unrecovered

I am facing an issue with the loss and restoration of webgl context. My application is quite complex, containing a lot of data, graphs, lists, and maps. Within the map section, I utilize webGL to ensure optimal performance. My code effectively manages th ...

javascriptmemorywebgl

How to retrieve response cookies using RxJS Ajax

When using RxJS to make an Ajax call request, I am able to set the headers of the request. However, I am wondering how I can retrieve the Cookie from the RxJS Ajax Response? import { ajax } from 'rxjs/ajax'; ajax({ url: "some url", body: ...

javascriptajaxcookiesrxjs

Retrieving binary content from an HTML5 Canvas using base64 encoding (readAsBinaryString)

Is it possible to extract binary data from an HTML Canvas? Currently, I have the following HTML code displaying an input file and a canvas below it: <p><button id="myButton" type="button">Get Image Content</button></p> <p>In ...

javascripthtmlhtml5-canvasfileapi