Skip to content

[docs] Overhaul autocomplete docs and demos #48470

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.

Sign up for GitHub

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

Draft
mj12albert wants to merge 7 commits into
base: master
Choose a base branch
from
Draft

[docs] Overhaul autocomplete docs and demos #48470

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e0881cc
reorganize doc
mj12albert Apr 28, 2026
a466f8d
demo cleanup
mj12albert Apr 29, 2026
b376f8c
rework github label demo
mj12albert Apr 30, 2026
c042c65
polish demos
mj12albert May 1, 2026
9eddc51
reorganize sections
mj12albert May 1, 2026
29c346d
polish
mj12albert May 4, 2026
18a6493
update slotProps.htmlInput related docs
mj12albert May 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/data/experiments/renderers/renderCountry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,10 @@ function EditCountry(props) {
fullWidth
id={params.id}
inputProps={{
...params.inputProps,
...params.slotProps.htmlInput,
autoComplete: 'new-password', // disable autocomplete and autofill
}}
{...params.InputProps}
{...params.slotProps.input}
/>
)}
/>
Expand Down
76 changes: 11 additions & 65 deletions docs/data/material/components/autocomplete/Asynchronous.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,33 @@ import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import CircularProgress from '@mui/material/CircularProgress';
import useTimeout from '@mui/utils/useTimeout';
import top100Films from './top100Films';

function sleep(duration) {
return new Promise((resolve) => {
setTimeout(() => {
resolve();
}, duration);
});
}
const LOAD_DELAY = 1000;
const topFilms = top100Films.slice(0, 30);

export default function Asynchronous() {
const loadOptions = useTimeout();
const [open, setOpen] = React.useState(false);
const [options, setOptions] = React.useState([]);
const [loading, setLoading] = React.useState(false);

const handleOpen = () => {
setOpen(true);
(async () => {
setLoading(true);
await sleep(1e3); // For demo purposes.
setLoading(false);
setLoading(true);

loadOptions.start(LOAD_DELAY, () => {
setOptions([...topFilms]);
})();
setLoading(false);
});
};

const handleClose = () => {
loadOptions.clear();
setOpen(false);
setOptions([]);
setLoading(false);
};

return (
Expand All @@ -38,8 +37,6 @@ export default function Asynchronous() {
open={open}
onOpen={handleOpen}
onClose={handleClose}
isOptionEqualToValue={(option, value) => option.title === value.title}
getOptionLabel={(option) => option.title}
options={options}
loading={loading}
renderInput={(params) => (
Expand All @@ -63,54 +60,3 @@ export default function Asynchronous() {
/>
);
}

// Top films as rated by IMDb users. http://www.imdb.com/chart/top
const topFilms = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
];
85 changes: 14 additions & 71 deletions docs/data/material/components/autocomplete/Asynchronous.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,35 @@ import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import CircularProgress from '@mui/material/CircularProgress';
import useTimeout from '@mui/utils/useTimeout';
import top100Films from './top100Films';

interface Film {
title: string;
year: number;
}

function sleep(duration: number): Promise<void> {
return new Promise<void>((resolve) => {
setTimeout(() => {
resolve();
}, duration);
});
}
const LOAD_DELAY = 1000;
const topFilms = top100Films.slice(0, 30);

export default function Asynchronous() {
const loadOptions = useTimeout();
const [open, setOpen] = React.useState(false);
const [options, setOptions] = React.useState<readonly Film[]>([]);
const [options, setOptions] = React.useState<readonly (typeof topFilms)[number][]>(
[],
);
const [loading, setLoading] = React.useState(false);

const handleOpen = () => {
setOpen(true);
(async () => {
setLoading(true);
await sleep(1e3); // For demo purposes.
setLoading(false);
setLoading(true);

loadOptions.start(LOAD_DELAY, () => {
setOptions([...topFilms]);
})();
setLoading(false);
});
};

const handleClose = () => {
loadOptions.clear();
setOpen(false);
setOptions([]);
setLoading(false);
};

return (
Expand All @@ -43,8 +39,6 @@ export default function Asynchronous() {
open={open}
onOpen={handleOpen}
onClose={handleClose}
isOptionEqualToValue={(option, value) => option.title === value.title}
getOptionLabel={(option) => option.title}
options={options}
loading={loading}
renderInput={(params) => (
Expand All @@ -68,54 +62,3 @@ export default function Asynchronous() {
/>
);
}

// Top films as rated by IMDb users. http://www.imdb.com/chart/top
const topFilms = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
];
Loading
Loading