MUI: Autocomplete cannot accept the provided value as it is invalid. There are no matching options for the input `""`

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

Whenever I input a value in the autocomplete component, an unresolved warning pops up... Here's how my input setup looks:

 <Autocomplete
            id="cboAdresse"
            sx={{ width: 100 + "%", fontFamily: "Poppins Bold" }}
            getOptionLabel={(option) =>
              typeof option === "string" ? option : option.label
            }
            filterOptions={(x) => {
              return x;
            }}
            options={lstadresse}
            isOptionEqualToValue={(option, value) =>
              value.label === option.label
            }
            autoComplete
            includeInputInList
            filterSelectedOptions
            value={adresse}
            noOptionsText="Aucune adresse trouvée"
            onChange={(event, newValue) => {
              setLstAdresse(
                newValue.name ? [newValue.name, ...lstadresse] : lstadresse
              );
              setAdresse(newValue.name);
              if (newValue.name != "") {
                setVille(newValue.city);
                setCodePostal(newValue.postcode);
              }
            }}
            onInputChange={(event, newInputValue) => {
              setInputRue(newInputValue);
            }}
            renderInput={(params) => (
              <div
                ref={params.InputProps.ref}
                className="login-block__input form_input_white"
              >
                <input
                  type="text"
                  name="adresse"
                  placeholder="Adresse"
                  {...params.inputProps}
                />
              </div>
            )}
      />

Despite using the IsOptionEqualToValue parameter, the issue persists. I've come across similar experiences where others have resolved it with the same method, but I remain stuck. Any insights or solutions are much appreciated. Thank you!

Answer №1

For MUI version 5, here is the code snippet to use:

isOptionEqualToValue={(option, value) => option.value === value.value}

Answer №2

To handle representing no value in the Autocomplete component, I have included a snippet of code within my wrapper for the Autocomplete component.

const { 
    // ... other props
    value: propValue,
     } = props;

// ...

let value = propValue;
if (propValue == null || propValue === '') {
    propValue = null;
}
return (
    <Autocomplete
        clearOnBlur
        value={propValue}
    />
);

The use of clearOnBlur is necessary to address certain issues that arise when using null values. For further insights, refer to my contribution on their GitHub page.

Answer №3

I've discovered that the best way to resolve this issue is by including a blank string in your list of choices.

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

What is the most effective method for incorporating social login, specifically "Sign in with Google", into an already established email/password application and database?

I am exploring the process of integrating Google sign-in into an existing app that already has account signup and login functionality. After following a tutorial on YouTube, I managed to successfully implement Google sign-in on my frontend. Upon logging i ...

Using Strapi and Next.js to retrieve user information

After searching for similar questions with no luck, I'm reaching out for help. Building an authentication system using Strapi and Next.js, I'm faced with a task that seems simple but eludes me. The main question is: How can the client retrieve u ...

serving static content on subdomains with Express JS

I created an API using Node.js Express JS and utilized apidocjs.com to generate the static content. The issue I am currently facing is that I want the documentation file to be located under a subdomain such as docs.example.com or api.example.com/docs. What ...

Convert the easeInExpo function from jQuery easing to vanilla JavaScript and CSS

Currently, I am in the process of converting a piece of code from jQuery to plain JavaScript and CSS. The specific code snippet I am focusing on involves creating easing functions without relying on jQuery. const customEasing = { easeInExpo: function ( ...

What's the best way to transfer a variable from a PHP file to a jQuery AJAX file so that it can be used as the URL parameter when sending

I am just starting out with javascript, jquery, and ajax. Unfortunately, I've encountered an issue where my code is not working as expected. Below, you can find a detailed description of my code and the problem at hand. If someone could offer some ass ...

Adding heatmaps to maps using React-Leaflet-Heatmap module

Utilizing the react-leftlet component to showcase maps, markers, layers, and controls. I recently created a layer using the heatmap-leaflet library. However, I'm encountering difficulties in integrating it with the existing map as most examples are ba ...

What could be the reason for the electron defaultPath failing to open the specified directory?

Hi, I'm experiencing difficulties opening the directory path (/home/userxyz/Releases/alpha) using electron. This is what I have attempted: I have a similar path on Ubuntu: /home/userxyz/Releases/alpha When trying to access this path with the fo ...

Material-ui Typography that always displays router links with an underline

I am facing an issue with removing the underline when I insert a React-Router link into a Typography element. Even selecting underline="none" or "hover" does not seem to work. The following snippet is from useStyles: title: { displ ...

How do I retrieve an index value from an array in GraphQL?

I am seeking a solution for obtaining the index of an array item that is not returned by downstream response. Let's consider my schema: schema: type Cart { items: [Item] } type Item { name: String index: Int } When the data comes in, it lo ...

Utilizing an external type definition in JSDoc @typedef

I'm encountering an issue with reducing redundancy when defining my imported types. I am trying to streamline the process, but unfortunately I am running into errors. /** @typedef {import("../types/util")} util @typedef {util.mapBehaviors} m ...

How to execute a system command or external command in Node.js

I am encountering an issue with Node.js. When using Python, I would typically perform an external command execution like this: import subprocess subprocess.call("bower init", shell=True) Although I have explored child_process.exec and spawn in Node.js, I ...

Unable to modify the model of the directive

I'm facing an issue where additional elements added to my array within a controller of a directive are not being displayed in the view. What's even more frustrating is that when I print my model, it doesn't reflect the new elements that have ...

Tips for managing errors when using .listen() in Express with Typescript

Currently in the process of transitioning my project to use Typescript. Previously, my code for launching Express in Node looked like this: server.listen(port, (error) => { if (error) throw error; console.info(`Ready on port ${port}`); }); However ...

Styling material-ui textfield: Tips and tricks

I've been grappling with figuring out how to customize a material-ui TextField component. <TextField id="email" label="Email" className={classes.textField} value={this.state.form_email} onChange={this.handle_change('form_e ...

Directive for integrating Amcharts with Angular JS

I have created a custom directive specifically for displaying a single chart using Amcharts. angular.module("App").directive('myElem', function () { return { restrict: 'E', replace:true, temp ...

Grid layout with card tiles similar to Google Plus

I'm looking to develop a scrolling grid with card tiles similar to Google Plus that has three columns. I am currently using Material UI, but I can't seem to find the right functionality for this. I have experimented with the standard Material UI ...

The Next.js client-side JavaScript application experiences unforeseen disruptions without generating any console errors

My server is responsible for constructing HTML from a JSON response: { content: "<div id=\"_next\">...</div>...<script src=\"...\"></script>" } This is how my Node server handles the data: const output = "&l ...

Updating the contents of one specific div without affecting all other divs with the same class

Below is the HTML code snippet in question: <a class="btn test-btn test-btn-1"> <span>Content 1</span> </a> This particular code block appears multiple times on the page. The number at the end of test-btn- is dynamically generat ...

When using Next JS with StoryBook, an error may occur if styles are written in a module.scss file

Every time I try to add some styles to my ButtonWidget.scss file, I encounter an error in the console when running the command yarn storybook Error Code: ERROR in ./src/components/ButtonWidget/ButtonWidget.module.scss 1:0 Module parse failed: Unexpected ...

The $scope variable fails to reflect updates in the view following a broadcast event triggered by a

I have been troubleshooting a similar issue and I can't seem to figure out why the update is not reflecting in the view. While I am able to see the scope variable updating in the catch events logs, the changes are not being displayed in the view. For ...