Comments (7)
Hello, I found some issues in your code that could be causing the problem. In fact, There was inconsistent management of inputValue and value props for the Autocomplete components: there was an inconsistency in how you managed the inputValue prop for the second Autocomplete component. You passed an inputValue prop but did not handle it properly with an onInputChange handler. The inputValue prop in Autocomplete is used to control the text input part of the component directly, and without proper handling, it can lead to unexpected behavior.
For the first Autocomplete, you did not specify an inputValue, which is fine if you are only controlling the selected value. However, for consistent behavior, especially when resetting, you might need to manage both value and inputValue to ensure the text field and the selected item are both reset correctly.
from material-ui.
@Hari0812
Here is a suggestion of how you can correct your code
`import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
const options = ['Option 1', 'Option 2'];
export function App() {
const [spec, setSpec] = React.useState({ first: '', second: '' });
const changeInput = (key, val) => {
const newSpec = { ...spec, [key]: val || '' };
if (Object.keys(newSpec).length === 2 && !newSpec.first && !newSpec.second) {
console.log(newSpec);
newSpec.first = ''; // Reset to empty string instead of deleting
newSpec.second = ''; // Reset to empty string instead of deleting
}
console.log(newSpec);
setSpec(newSpec);
};
return (
spec: ${spec.first}
}dec: ${spec.second}
}<Autocomplete
value={spec.first || ''}
onChange={(event, value) => {
changeInput('first', value);
}}
id="autocomplete-first"
options={options}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="First Option" />}
/>
<Autocomplete
value={spec.second || ''}
onChange={(event, value) => {
changeInput('second', value);
}}
id="autocomplete-second"
options={options}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Second Option" />}
/>
);
}
`
from material-ui.
Hi @EyaOuenniche
Thanks for your valuable feedback. I am still facing some issues even though I attached a value prop to two dropdowns i attached a screen recording below for your reference if you look closely the value is clear on the second/first dropdown selection but the text is still shown in the dropdown until I make another click
Screen.Recording.2024-02-12.at.7.47.45.AM.mov
FIX:
<Autocomplete
value={spec.first || ''}
onChange={(event, value) => {
changeInput('first', value);
}}
inputValue={spec.first}
id="autocomplete-first"
options={options}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="First Option" />}
/>
<Autocomplete
value={spec.second || ''}
onChange={(event, value) => {
changeInput('second', value);
}}
inputValue={spec.second}
id="autocomplete-second"
options={options}
sx={{ width: 300 }}
renderInput={(params) => (
<TextField {...params} label="Second Option" />
)}
/>
I've set both the value and Input props to the same value. I'm unsure if this is the correct approach and I'm seeking advice on efficiency. Could you suggest an alternative method if this isn't efficient?
Thanks
from material-ui.
Hello @Hari0812 ,
Setting both the value and inputValue props to the same state variable for your Autocomplete components might seem redundant, and it could potentially lead to the issues you're experiencing. However, I have implement your fix and it seems to be working. Here is the code that I used based on your solution.
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
const options = ['Option 1', 'Option 2'];
export function App() {
const [spec, setSpec] = React.useState({ first: '', second: '' });
const changeInput = (key, val) => {
const newSpec = { ...spec, [key]: val || '' };
if (Object.keys(newSpec).length === 2 && !newSpec.first && !newSpec.second) {
console.log(newSpec);
newSpec.first = ''; // Reset to empty string instead of deleting
newSpec.second = ''; // Reset to empty string instead of deleting
}
console.log(newSpec);
setSpec(newSpec);
};
return (
<>
<div>{`spec: ${spec.first}`}</div>
<div>{`dec: ${spec.second}`}</div>
<Autocomplete
value={spec.first || ''}
onChange={(event, value) => {
changeInput('first', value);
}}
inputValue={spec.first}
id="autocomplete-first"
options={options}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="First Option" />}
/>
<Autocomplete
value={spec.second || ''}
onChange={(event, value) => {
changeInput('second', value);
}}
inputValue={spec.second}
id="autocomplete-second"
options={options}
sx={{ width: 300 }}
renderInput={(params) => (
<TextField {...params} label="Second Option" />
)}
/>
</>
);
}
from material-ui.
Hi @EyaOuenniche
May I know what changes you made to remove the redundant value for inputValue and Value prop I don't see any difference in it?
Thanks : )
from material-ui.
Actually there I did not, I just reproduced your code and added this part
const [spec, setSpec] = React.useState({ first: '', second: '' });
const changeInput = (key, val) => {
const newSpec = { ...spec, [key]: val || '' };
if (Object.keys(newSpec).length === 2 && !newSpec.first && !newSpec.second) {
console.log(newSpec);
newSpec.first = ''; // Reset to empty string instead of deleting
newSpec.second = ''; // Reset to empty string instead of deleting
}
console.log(newSpec);
setSpec(newSpec);
};
If you would like to remove the redundant value for inputValue and value prop, you need to separate them into 2 different states. here is my suggestion:
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
const options = ['Option 1', 'Option 2'];
export function App() {
const [spec, setSpec] = React.useState({ first: '', second: '' });
const [inputValues, setInputValues] = React.useState({ first: '', second: '' });
const changeInput = (key, val) => {
const newSpec = { ...spec, [key]: val || '' };
if (Object.keys(newSpec).length === 2 && !newSpec.first && !newSpec.second) {
console.log(newSpec);
// Intended reset logic
newSpec.first = ''; // Reset to empty string instead of deleting
newSpec.second = ''; // Reset to empty string instead of deleting
}
setSpec(newSpec);
};
const handleInputChange = (key, value) => {
setInputValues((prevValues) => ({ ...prevValues, [key]: value }));
};
return (
<>
<div>{`spec: ${spec.first}`}</div>
<div>{`dec: ${spec.second}`}</div>
<Autocomplete
value={spec.first || ''}
onChange={(event, value) => changeInput('first', value)}
inputValue={inputValues.first}
onInputChange={(event, value) => handleInputChange('first', value)}
id="autocomplete-first"
options={options}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="First Option" />}
/>
<Autocomplete
value={spec.second || ''}
onChange={(event, value) => changeInput('second', value)}
inputValue={inputValues.second}
onInputChange={(event, value) => handleInputChange('second', value)}
id="autocomplete-second"
options={options}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Second Option" />}
/>
</>
);
}
from material-ui.
Thanks :)
I close this issue
from material-ui.
Related Issues (20)
- [joy-ui] Temperature check on the future of Joy UI HOT 1
- [docs-infra] CodeSandbox/StackBlitz broken for demos with relative imports
- test #42499 HOT 1
- [docs] Random Unsplash photo URL is no longer functional HOT 2
- [docs] Add documentation for preventing SSR flicker/FOUC with the Next.js app router HOT 5
- sx prop not work HOT 2
- [v6] Module not found: DefaultPropsProvider/ InitColorSchemeScript HOT 9
- [joy-ui] When using styled('div') all its properties are lost HOT 1
- bug: Preact example is throwing errors HOT 2
- [material-ui][Autocomplete] label cut off when the option list is displayed above.
- @mui/material: incorrect responsiveFontSizes return type when using CssVarsTheme as input HOT 2
- [mui-system][material-ui][Grid v2] Stabilize API HOT 6
- [docs][Grid v2] Restructure docs HOT 3
- Some bad ts performance cases
- Mui input base text area style is not applied correctly with input props on 5.15.11 from 5.15.10 HOT 6
- [Joy UI] Typography color is not defined by what is on the table HOT 2
- Autocomplete with groups throws accessibility scanner issues
- Opening the Scroll Dialogs diables scrolling on main page
- DataGrid ColumnHeader Border Changed from v6 to v7 HOT 1
- Type conflict in Button component's `href` prop when using `component` prop
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui.