[Autocomplete] Fix "fixed tags" demo (#20687)

Author: kthyer

docs/src/pages/components/autocomplete/FixedTags.js

@@ -5,16 +5,29 @@ import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 
 export default function FixedTags() {
+  const fixedOptions = [top100Films[6]];
+  const [value, setValue] = React.useState([...fixedOptions, top100Films[13]]);
+
   return (
     <Autocomplete
       multiple
       id="fixed-tags-demo"
+      value={value}
+      onChange={(event, newValue) => {
+        setValue([
+          ...fixedOptions,
+          ...newValue.filter((option) => fixedOptions.indexOf(option) === -1),
+        ]);
+      }}
       options={top100Films}
       getOptionLabel={(option) => option.title}
-      defaultValue={[top100Films[6], top100Films[13]]}
-      renderTags={(value, getTagProps) =>
-        value.map((option, index) => (
-          <Chip label={option.title} {...getTagProps({ index })} disabled={index === 0} />
+      renderTags={(tagValue, getTagProps) =>
+        tagValue.map((option, index) => (
+          <Chip
+            label={option.title}
+            {...getTagProps({ index })}
+            disabled={fixedOptions.indexOf(option) !== -1}
+          />
         ))
       }
       style={{ width: 500 }}

docs/src/pages/components/autocomplete/FixedTags.tsx

@@ -5,16 +5,29 @@ import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 
 export default function FixedTags() {
+  const fixedOptions = [top100Films[6]];
+  const [value, setValue] = React.useState([...fixedOptions, top100Films[13]]);
+
   return (
     <Autocomplete
       multiple
       id="fixed-tags-demo"
+      value={value}
+      onChange={(event, newValue) => {
+        setValue([
+          ...fixedOptions,
+          ...newValue.filter((option) => fixedOptions.indexOf(option) === -1),
+        ]);
+      }}
       options={top100Films}
       getOptionLabel={(option) => option.title}
-      defaultValue={[top100Films[6], top100Films[13]]}
-      renderTags={(value, getTagProps) =>
-        value.map((option, index) => (
-          <Chip label={option.title} {...getTagProps({ index })} disabled={index === 0} />
+      renderTags={(tagValue, getTagProps) =>
+        tagValue.map((option, index) => (
+          <Chip
+            label={option.title}
+            {...getTagProps({ index })}
+            disabled={fixedOptions.indexOf(option) !== -1}
+          />
         ))
       }
       style={{ width: 500 }}