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)
- [docs-infra] Create a feature list/highlights component
- [joy-ui][IconButton] Wrapping IconButton over an Avatar HOT 2
- [pigment-css] Support module aliases in nextjs-plugin HOT 2
- [material-ui][Autocomplete] React keys being passed directly to JSX without using spread HOT 4
- [material-ui][Text Field] Multiline variant cannot be made to scroll horizontally HOT 1
- [joy-ui][Circular/Linear Progress] soft (default) variant is hard to see in dark mode HOT 1
- [codemod] Error while running command ````pnpm tc badge-props```` and ````pnpm eslint```` HOT 3
- [material-ui] styleOverrides behaviour is different in MUI v4 and v5 HOT 4
- [material-ui][Select] Issue with components in fullscreen view mode HOT 2
- mistake
- [material-ui][Select] Basic demo label text is overlapping HOT 2
- Permission denied when opening Dialog while Proton Pass is active HOT 4
- [docs-infra] Add line and word highlighting on code blocks
- [joy-ui] Allow extending the color inversion feature HOT 2
- [material-ui] Is there any way to apply the Tailwind's `dark:` class prefix? HOT 2
- [docs] Accordion TransitionProps vs slotProps.transition
- [docs] Demo BasicModal crashes HOT 8
- [material-ui][Select] "&ZeroWidthSpace" is being rendered as child element HOT 2
- [typography] Allow sx prop-like responsive values on the variant prop HOT 3
- [docs] User Persona Proposal for Material UI HOT 1
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.