-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Autocomplete] Improve freeSolo UX #19663
Conversation
No bundle size changes comparing 01b8b09...48cb975 |
@itelofilho Why do we need a new component? For instance, what about a new demo? It doesn't seem that we need more than 10 LOCs. https://codesandbox.io/s/material-demo-bsbxm /* eslint-disable no-use-before-define */
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete, {
createFilterOptions
} from "@material-ui/lab/Autocomplete";
const filter = createFilterOptions();
export default function ComboBox() {
const [value, setValue] = React.useState(null);
return (
<Autocomplete
value={value}
onChange={(event, value) => {
if (value && value.freeSolo) {
setValue({
title: value.inputValue
});
return;
}
setValue(value);
}}
filterOptions={(options, params) => {
const filtered = filter(options, params);
if (params.inputValue !== "") {
filtered.push({
freeSolo: true,
inputValue: params.inputValue,
title: `Add "${params.inputValue}"`
});
}
return filtered;
}}
id="combo-box-demo"
options={top100Films}
getOptionLabel={option => option.title}
style={{ width: 300 }}
freeSolo
renderInput={params => (
<TextField {...params} label="Combo box" variant="outlined" fullWidth />
)}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: "The Shawshank Redemption", year: 1994 },
]; |
Now, I'm wondering about the level of integration we should give. They are 3 levels:
I have looked at the options react-select provides for it: https://react-select.com/props#creatable-props. It seems that all of them can be easily be implemented with the demo I have proposed. So 1, 2, 3 are all on the table. What would be best? 🤔
What about we go with 1. and look at the demo stats usage? Then, we can better evalute if we should bring it into the core? |
I agree with you, the 1 is fine for now. Should I close this PR and create a new one with only the new demos or just a rebase is ok? Also, I believe the most common cases for creating a new option are the two I put in the examples, could I move with it? |
I update the examples but in the middle of the process, I found some issues.
|
We are good.
|
I will push the fix for 1 and 2. For 3, if you want to lead the effort, it would be huge :D. |
c1f4af5
to
ba5ff81
Compare
ba5ff81
to
fb9f4e9
Compare
2689869
to
79741c0
Compare
Awesome! I will take a look at 3. |
@itelofilho If you could double-check my changes, it would be perfect |
…o/material-ui into creatable-autocomplete
I just found a little mistake that I already fixed, I believe everything is fine now. Should I rebase? |
Thanks for the small patch and these new demos :) |
Nice bro, works like a charm |
This is a draft.
First I started putting all the logic inside the Autocomplete and useAutocomplete, but the more I advance, the more complicated the state was and the code started not looking that good (as you can see here and here). So I made some research and based on react-react created a new component that handles the creation of a new option.
There isn't any tests and no new documentation, first I want to know if It looks good so I can move on.
:)
https://deploy-preview-19663--material-ui.netlify.com/components/autocomplete/
closes #18985