Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Calling setValue on Material UI Autocomplete input fails when default value is undefined.

See original GitHub issue

Describe the bug Calling setValue for Material UI Autocomplete component when default value is “undefined” fails to work as expected. When setting default value to empty string, calling setValue returns expected results. Autocomplete is connected up using Controller component as per documentation.

Potentially related to, but not exactly the same as #5276

To Reproduce Steps to reproduce the behavior:

Go to code sandbox
Scroll down to the new set country button (below MUI autocomplete section which is enabled).
Verify that country is empty.
Click set country button.
This is the bug, nothing happens. I would expect to see country now display “New Zealand” but it’s still empty.

Temporary workaround:

Scroll up to line 41 of index.js and change country: undefined, to country: ""
Reload the app, and repeat steps 3 and 4.
Clicking set country when default is empty string works as expected.

As country is an object I would expect that I can leave it empty by defaulting it to undefined.

Codesandbox link (Required)

https://codesandbox.io/s/react-hook-form-v7-controller-forked-683yc?file=/src/index.js

Desktop (please complete the following information):

OS: MacOS
Browser: Edge
Version: 90.0.818.62 (Official build) (64-bit)

Additional context Add any other context about the problem here.

Issue Analytics

State:
Created 2 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

bluebill1049commented, May 21, 2021

doc is updated.

1reaction

josiahayrescommented, May 21, 2021

Fair enough - I have removed all unrelated code that was pulled in when forking the codesandbox from the demo. I have updated the link.

Top Results From Across the Web

Material UI unable to set default value on Autocomplete

So in case the value is empty, it returns The 'getOptionLabel' method of Autocomplete returned undefined instead of a string for "". –...

Autocomplete immediately changes initial inputValue state

On startup, notice onInputChange is immediately called with a blank string and thus resets the initial value.

Input Components - React-admin - Marmelab

Tip: By default, react-admin inputs have the following format function, which turns any null or undefined value into an empty string.

Switch API - Material UI - MUI

API reference docs for the React Switch component. Learn about the props, CSS, and other APIs of this exported module.

how to select all value material ui autocomplete Code Example

material ui autocomple how make first option is selected as default ; 1. <Autocomplete ; 2. id="id" ; 3. options={Options} ; 4. getOptionLabel={option...