[Autocomplete] async examples of the new documentation broken

[dohomi]

The async Autocomplete examples are currently not working any longer.

Open:

https://next.material-ui.com/components/autocomplete/#load-on-open

The request is not able to be made. Beside that I think from .27 => .28 the async Autocomplete errors but I still investigate.

[oliviertassinari]

@dohomi Thanks for raising it, the endpoint seems dead: https://country.register.gov.uk/records.json?page-size=5000.

GOV.UK Registers was a service provided by the Government Digital Service which retired on March 15 2021.

[oliviertassinari]

They didn't provide a replacement option. Just discontinued it. In this case, I would propose we avoid external network requests:

diff --git a/docs/src/pages/components/autocomplete/Asynchronous.tsx b/docs/src/pages/components/autocomplete/Asynchronous.tsx
index 1b9c615dee..68286d1900 100644
--- a/docs/src/pages/components/autocomplete/Asynchronous.tsx
+++ b/docs/src/pages/components/autocomplete/Asynchronous.tsx
@@ -1,12 +1,9 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
 import * as React from 'react';
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/core/Autocomplete';
 import CircularProgress from '@material-ui/core/CircularProgress';

-interface CountryType {
-  name: string;
-}
-
 function sleep(delay = 0) {
   return new Promise((resolve) => {
     setTimeout(resolve, delay);
@@ -15,7 +12,7 @@ function sleep(delay = 0) {

 export default function Asynchronous() {
   const [open, setOpen] = React.useState(false);
-  const [options, setOptions] = React.useState<CountryType[]>([]);
+  const [options, setOptions] = React.useState<typeof top100Films>([]);
   const loading = open && options.length === 0;

   React.useEffect(() => {
@@ -26,19 +23,9 @@ export default function Asynchronous() {
     }

     (async () => {
-      // https://www.registers.service.gov.uk/registers/country/use-the-api
-      const response = await fetch(
-        'https://country.register.gov.uk/records.json?page-size=5000',
-      );
       await sleep(1e3); // For demo purposes.
-      const countries = await response.json();
-
       if (active) {
-        setOptions(
-          Object.keys(countries).map(
-            (key) => countries[key].item[0],
-          ) as CountryType[],
-        );
+        setOptions([...top100Films]);
       }
     })();

@@ -64,8 +51,8 @@ export default function Asynchronous() {
       onClose={() => {
         setOpen(false);
       }}
-      getOptionSelected={(option, value) => option.name === value.name}
-      getOptionLabel={(option) => option.name}
+      getOptionSelected={(option, value) => option.title === value.title}
+      getOptionLabel={(option) => option.title}
       options={options}
       loading={loading}
       renderInput={(params) => (
@@ -86,3 +73,54 @@ export default function Asynchronous() {
     />
   );
 }
+
+// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
+const top100Films = [
+  { 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 },
+];

@dohomi What do you think about this option?

[dohomi]

@oliviertassinari yes that is looking good 👍

[oliviertassinari]

@dohomi OK, great. I have left a "good first issue" label, so anyone can grab it to open a pull request.

[kanish671]

I would like to pick this up!
Is the solution what you are proposing in the above comment?

[oliviertassinari]

@kanish671 Yes