From 9a1d427d5ac62dbad1df41cd5e35bb23028281e9 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 22 Feb 2020 21:58:07 +0100
Subject: [PATCH] [Autocomplete] Built-in fullWidth

---
 .../components/autocomplete/Asynchronous.js   |  1 -
 .../components/autocomplete/Asynchronous.tsx  |  1 -
 .../components/autocomplete/CheckboxesTags.js |  8 +---
 .../autocomplete/CheckboxesTags.tsx           |  8 +---
 .../pages/components/autocomplete/ComboBox.js |  4 +-
 .../components/autocomplete/ComboBox.tsx      |  4 +-
 .../components/autocomplete/CountrySelect.js  |  1 -
 .../components/autocomplete/CountrySelect.tsx |  1 -
 .../autocomplete/DisabledOptions.js           |  4 +-
 .../autocomplete/DisabledOptions.tsx          |  4 +-
 .../pages/components/autocomplete/Filter.js   |  4 +-
 .../pages/components/autocomplete/Filter.tsx  |  4 +-
 .../components/autocomplete/FixedTags.js      |  8 +---
 .../components/autocomplete/FixedTags.tsx     |  8 +---
 .../pages/components/autocomplete/FreeSolo.js |  3 +-
 .../components/autocomplete/FreeSolo.tsx      |  3 +-
 .../autocomplete/FreeSoloCreateOption.js      |  2 +-
 .../autocomplete/FreeSoloCreateOption.tsx     |  2 +-
 .../FreeSoloCreateOptionDialog.js             |  4 +-
 .../FreeSoloCreateOptionDialog.tsx            |  4 +-
 .../components/autocomplete/GoogleMaps.js     |  1 -
 .../components/autocomplete/GoogleMaps.tsx    |  1 -
 .../pages/components/autocomplete/Grouped.js  |  4 +-
 .../pages/components/autocomplete/Grouped.tsx |  4 +-
 .../components/autocomplete/Highlights.js     |  2 +-
 .../components/autocomplete/Highlights.tsx    |  2 +-
 .../components/autocomplete/Playground.js     | 48 ++++++-------------
 .../components/autocomplete/Playground.tsx    | 48 ++++++-------------
 .../pages/components/autocomplete/Sizes.js    | 48 +++----------------
 .../pages/components/autocomplete/Sizes.tsx   | 48 +++----------------
 .../src/pages/components/autocomplete/Tags.js | 10 +---
 .../pages/components/autocomplete/Tags.tsx    | 10 +---
 .../components/autocomplete/Virtualize.js     |  4 +-
 .../components/autocomplete/Virtualize.tsx    |  4 +-
 .../src/Autocomplete/Autocomplete.js          |  1 +
 35 files changed, 65 insertions(+), 248 deletions(-)

diff --git a/docs/src/pages/components/autocomplete/Asynchronous.js b/docs/src/pages/components/autocomplete/Asynchronous.js
index d94c421d9d9be9..6c65770f44ab20 100644
--- a/docs/src/pages/components/autocomplete/Asynchronous.js
+++ b/docs/src/pages/components/autocomplete/Asynchronous.js
@@ -63,7 +63,6 @@ export default function Asynchronous() {
         <TextField
           {...params}
           label="Asynchronous"
-          fullWidth
           variant="outlined"
           InputProps={{
             ...params.InputProps,
diff --git a/docs/src/pages/components/autocomplete/Asynchronous.tsx b/docs/src/pages/components/autocomplete/Asynchronous.tsx
index 77c60d8ef45651..f72b8d6b21d9e0 100644
--- a/docs/src/pages/components/autocomplete/Asynchronous.tsx
+++ b/docs/src/pages/components/autocomplete/Asynchronous.tsx
@@ -67,7 +67,6 @@ export default function Asynchronous() {
         <TextField
           {...params}
           label="Asynchronous"
-          fullWidth
           variant="outlined"
           InputProps={{
             ...params.InputProps,
diff --git a/docs/src/pages/components/autocomplete/CheckboxesTags.js b/docs/src/pages/components/autocomplete/CheckboxesTags.js
index 81f00eb8c8e78a..e6661e77dda655 100644
--- a/docs/src/pages/components/autocomplete/CheckboxesTags.js
+++ b/docs/src/pages/components/autocomplete/CheckboxesTags.js
@@ -31,13 +31,7 @@ export default function CheckboxesTags() {
       )}
       style={{ width: 500 }}
       renderInput={params => (
-        <TextField
-          {...params}
-          variant="outlined"
-          label="Checkboxes"
-          placeholder="Favorites"
-          fullWidth
-        />
+        <TextField {...params} variant="outlined" label="Checkboxes" placeholder="Favorites" />
       )}
     />
   );
diff --git a/docs/src/pages/components/autocomplete/CheckboxesTags.tsx b/docs/src/pages/components/autocomplete/CheckboxesTags.tsx
index 81f00eb8c8e78a..e6661e77dda655 100644
--- a/docs/src/pages/components/autocomplete/CheckboxesTags.tsx
+++ b/docs/src/pages/components/autocomplete/CheckboxesTags.tsx
@@ -31,13 +31,7 @@ export default function CheckboxesTags() {
       )}
       style={{ width: 500 }}
       renderInput={params => (
-        <TextField
-          {...params}
-          variant="outlined"
-          label="Checkboxes"
-          placeholder="Favorites"
-          fullWidth
-        />
+        <TextField {...params} variant="outlined" label="Checkboxes" placeholder="Favorites" />
       )}
     />
   );
diff --git a/docs/src/pages/components/autocomplete/ComboBox.js b/docs/src/pages/components/autocomplete/ComboBox.js
index eb607b0311571b..d861ea76e0860d 100644
--- a/docs/src/pages/components/autocomplete/ComboBox.js
+++ b/docs/src/pages/components/autocomplete/ComboBox.js
@@ -10,9 +10,7 @@ export default function ComboBox() {
       options={top100Films}
       getOptionLabel={option => option.title}
       style={{ width: 300 }}
-      renderInput={params => (
-        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} label="Combo box" variant="outlined" />}
     />
   );
 }
diff --git a/docs/src/pages/components/autocomplete/ComboBox.tsx b/docs/src/pages/components/autocomplete/ComboBox.tsx
index eb607b0311571b..d861ea76e0860d 100644
--- a/docs/src/pages/components/autocomplete/ComboBox.tsx
+++ b/docs/src/pages/components/autocomplete/ComboBox.tsx
@@ -10,9 +10,7 @@ export default function ComboBox() {
       options={top100Films}
       getOptionLabel={option => option.title}
       style={{ width: 300 }}
-      renderInput={params => (
-        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} label="Combo box" variant="outlined" />}
     />
   );
 }
diff --git a/docs/src/pages/components/autocomplete/CountrySelect.js b/docs/src/pages/components/autocomplete/CountrySelect.js
index 891fc807ea2416..a0aa56ee139394 100644
--- a/docs/src/pages/components/autocomplete/CountrySelect.js
+++ b/docs/src/pages/components/autocomplete/CountrySelect.js
@@ -46,7 +46,6 @@ export default function CountrySelect() {
           {...params}
           label="Choose a country"
           variant="outlined"
-          fullWidth
           inputProps={{
             ...params.inputProps,
             autoComplete: 'new-password', // disable autocomplete and autofill
diff --git a/docs/src/pages/components/autocomplete/CountrySelect.tsx b/docs/src/pages/components/autocomplete/CountrySelect.tsx
index 8408005380686b..97310d9f11f8e7 100644
--- a/docs/src/pages/components/autocomplete/CountrySelect.tsx
+++ b/docs/src/pages/components/autocomplete/CountrySelect.tsx
@@ -46,7 +46,6 @@ export default function CountrySelect() {
           {...params}
           label="Choose a country"
           variant="outlined"
-          fullWidth
           inputProps={{
             ...params.inputProps,
             autoComplete: 'new-password', // disable autocomplete and autofill
diff --git a/docs/src/pages/components/autocomplete/DisabledOptions.js b/docs/src/pages/components/autocomplete/DisabledOptions.js
index 268e2e28969452..b40312041fa0bb 100644
--- a/docs/src/pages/components/autocomplete/DisabledOptions.js
+++ b/docs/src/pages/components/autocomplete/DisabledOptions.js
@@ -10,9 +10,7 @@ export default function DisabledOptions() {
       options={timeSlots}
       getOptionDisabled={option => option === timeSlots[0] || option === timeSlots[2]}
       style={{ width: 300 }}
-      renderInput={params => (
-        <TextField {...params} label="Disabled options" variant="outlined" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} label="Disabled options" variant="outlined" />}
     />
   );
 }
diff --git a/docs/src/pages/components/autocomplete/DisabledOptions.tsx b/docs/src/pages/components/autocomplete/DisabledOptions.tsx
index 268e2e28969452..b40312041fa0bb 100644
--- a/docs/src/pages/components/autocomplete/DisabledOptions.tsx
+++ b/docs/src/pages/components/autocomplete/DisabledOptions.tsx
@@ -10,9 +10,7 @@ export default function DisabledOptions() {
       options={timeSlots}
       getOptionDisabled={option => option === timeSlots[0] || option === timeSlots[2]}
       style={{ width: 300 }}
-      renderInput={params => (
-        <TextField {...params} label="Disabled options" variant="outlined" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} label="Disabled options" variant="outlined" />}
     />
   );
 }
diff --git a/docs/src/pages/components/autocomplete/Filter.js b/docs/src/pages/components/autocomplete/Filter.js
index 2c3c5d6f5d595d..3ceccae605bf1b 100644
--- a/docs/src/pages/components/autocomplete/Filter.js
+++ b/docs/src/pages/components/autocomplete/Filter.js
@@ -16,9 +16,7 @@ export default function Filter() {
       getOptionLabel={option => option.title}
       filterOptions={filterOptions}
       style={{ width: 300 }}
-      renderInput={params => (
-        <TextField {...params} label="Custom filter" variant="outlined" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} label="Custom filter" variant="outlined" />}
     />
   );
 }
diff --git a/docs/src/pages/components/autocomplete/Filter.tsx b/docs/src/pages/components/autocomplete/Filter.tsx
index 7c6112708dc2b0..86fb696811b5f2 100644
--- a/docs/src/pages/components/autocomplete/Filter.tsx
+++ b/docs/src/pages/components/autocomplete/Filter.tsx
@@ -16,9 +16,7 @@ export default function Filter() {
       getOptionLabel={option => option.title}
       filterOptions={filterOptions}
       style={{ width: 300 }}
-      renderInput={params => (
-        <TextField {...params} label="Custom filter" variant="outlined" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} label="Custom filter" variant="outlined" />}
     />
   );
 }
diff --git a/docs/src/pages/components/autocomplete/FixedTags.js b/docs/src/pages/components/autocomplete/FixedTags.js
index a76eaaa5a4bcd6..7398159fc8173e 100644
--- a/docs/src/pages/components/autocomplete/FixedTags.js
+++ b/docs/src/pages/components/autocomplete/FixedTags.js
@@ -19,13 +19,7 @@ export default function FixedTags() {
       }
       style={{ width: 500 }}
       renderInput={params => (
-        <TextField
-          {...params}
-          label="Fixed tag"
-          variant="outlined"
-          placeholder="Favorites"
-          fullWidth
-        />
+        <TextField {...params} label="Fixed tag" variant="outlined" placeholder="Favorites" />
       )}
     />
   );
diff --git a/docs/src/pages/components/autocomplete/FixedTags.tsx b/docs/src/pages/components/autocomplete/FixedTags.tsx
index a76eaaa5a4bcd6..7398159fc8173e 100644
--- a/docs/src/pages/components/autocomplete/FixedTags.tsx
+++ b/docs/src/pages/components/autocomplete/FixedTags.tsx
@@ -19,13 +19,7 @@ export default function FixedTags() {
       }
       style={{ width: 500 }}
       renderInput={params => (
-        <TextField
-          {...params}
-          label="Fixed tag"
-          variant="outlined"
-          placeholder="Favorites"
-          fullWidth
-        />
+        <TextField {...params} label="Fixed tag" variant="outlined" placeholder="Favorites" />
       )}
     />
   );
diff --git a/docs/src/pages/components/autocomplete/FreeSolo.js b/docs/src/pages/components/autocomplete/FreeSolo.js
index eca97faea0a224..e6efaa351bb37f 100644
--- a/docs/src/pages/components/autocomplete/FreeSolo.js
+++ b/docs/src/pages/components/autocomplete/FreeSolo.js
@@ -11,7 +11,7 @@ export default function FreeSolo() {
         freeSolo
         options={top100Films.map(option => option.title)}
         renderInput={params => (
-          <TextField {...params} label="freeSolo" margin="normal" variant="outlined" fullWidth />
+          <TextField {...params} label="freeSolo" margin="normal" variant="outlined" />
         )}
       />
       <Autocomplete
@@ -25,7 +25,6 @@ export default function FreeSolo() {
             label="Search input"
             margin="normal"
             variant="outlined"
-            fullWidth
             InputProps={{ ...params.InputProps, type: 'search' }}
           />
         )}
diff --git a/docs/src/pages/components/autocomplete/FreeSolo.tsx b/docs/src/pages/components/autocomplete/FreeSolo.tsx
index eca97faea0a224..e6efaa351bb37f 100644
--- a/docs/src/pages/components/autocomplete/FreeSolo.tsx
+++ b/docs/src/pages/components/autocomplete/FreeSolo.tsx
@@ -11,7 +11,7 @@ export default function FreeSolo() {
         freeSolo
         options={top100Films.map(option => option.title)}
         renderInput={params => (
-          <TextField {...params} label="freeSolo" margin="normal" variant="outlined" fullWidth />
+          <TextField {...params} label="freeSolo" margin="normal" variant="outlined" />
         )}
       />
       <Autocomplete
@@ -25,7 +25,6 @@ export default function FreeSolo() {
             label="Search input"
             margin="normal"
             variant="outlined"
-            fullWidth
             InputProps={{ ...params.InputProps, type: 'search' }}
           />
         )}
diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.js b/docs/src/pages/components/autocomplete/FreeSoloCreateOption.js
index 3aa9a6b2bfa1c1..1234471bfe9c43 100644
--- a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.js
+++ b/docs/src/pages/components/autocomplete/FreeSoloCreateOption.js
@@ -50,7 +50,7 @@ export default function FreeSoloCreateOption() {
       style={{ width: 300 }}
       freeSolo
       renderInput={params => (
-        <TextField {...params} label="Free solo with text demo" variant="outlined" fullWidth />
+        <TextField {...params} label="Free solo with text demo" variant="outlined" />
       )}
     />
   );
diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx b/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx
index 0323feffd3559d..448d3fddc936b2 100644
--- a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx
+++ b/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx
@@ -49,7 +49,7 @@ export default function FreeSoloCreateOption() {
       style={{ width: 300 }}
       freeSolo
       renderInput={params => (
-        <TextField {...params} label="Free solo with text demo" variant="outlined" fullWidth />
+        <TextField {...params} label="Free solo with text demo" variant="outlined" />
       )}
     />
   );
diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js
index bc1586c2bb865d..9ac3158273f9be 100644
--- a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js
+++ b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js
@@ -96,7 +96,7 @@ export default function FreeSoloCreateOptionDialog() {
         style={{ width: 300 }}
         freeSolo
         renderInput={params => (
-          <TextField {...params} label="Free solo dialog" variant="outlined" fullWidth />
+          <TextField {...params} label="Free solo dialog" variant="outlined" />
         )}
       />
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
@@ -114,7 +114,6 @@ export default function FreeSoloCreateOptionDialog() {
               onChange={event => setDialogValue({ ...dialogValue, title: event.target.value })}
               label="title"
               type="text"
-              fullWidth
             />
             <TextField
               margin="dense"
@@ -123,7 +122,6 @@ export default function FreeSoloCreateOptionDialog() {
               onChange={event => setDialogValue({ ...dialogValue, year: event.target.value })}
               label="year"
               type="number"
-              fullWidth
             />
           </DialogContent>
           <DialogActions>
diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx
index caa7b3f415097a..112c3da00513fb 100644
--- a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx
+++ b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx
@@ -93,7 +93,7 @@ export default function FreeSoloCreateOptionDialog() {
         style={{ width: 300 }}
         freeSolo
         renderInput={params => (
-          <TextField {...params} label="Free solo dialog" variant="outlined" fullWidth />
+          <TextField {...params} label="Free solo dialog" variant="outlined" />
         )}
       />
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
@@ -111,7 +111,6 @@ export default function FreeSoloCreateOptionDialog() {
               onChange={event => setDialogValue({ ...dialogValue, title: event.target.value })}
               label="title"
               type="text"
-              fullWidth
             />
             <TextField
               margin="dense"
@@ -120,7 +119,6 @@ export default function FreeSoloCreateOptionDialog() {
               onChange={event => setDialogValue({ ...dialogValue, year: event.target.value })}
               label="year"
               type="number"
-              fullWidth
             />
           </DialogContent>
           <DialogActions>
diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.js b/docs/src/pages/components/autocomplete/GoogleMaps.js
index 23b342b0a93786..ac259a418f0e3e 100644
--- a/docs/src/pages/components/autocomplete/GoogleMaps.js
+++ b/docs/src/pages/components/autocomplete/GoogleMaps.js
@@ -94,7 +94,6 @@ export default function GoogleMaps() {
       options={options}
       autoComplete
       includeInputInList
-      freeSolo
       disableOpenOnFocus
       renderInput={params => (
         <TextField
diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.tsx b/docs/src/pages/components/autocomplete/GoogleMaps.tsx
index 516010ff48d585..7007dc5b8fcb4f 100644
--- a/docs/src/pages/components/autocomplete/GoogleMaps.tsx
+++ b/docs/src/pages/components/autocomplete/GoogleMaps.tsx
@@ -108,7 +108,6 @@ export default function GoogleMaps() {
       options={options}
       autoComplete
       includeInputInList
-      freeSolo
       disableOpenOnFocus
       renderInput={params => (
         <TextField
diff --git a/docs/src/pages/components/autocomplete/Grouped.js b/docs/src/pages/components/autocomplete/Grouped.js
index cf233d53353b0f..e9d2b1f28264ad 100644
--- a/docs/src/pages/components/autocomplete/Grouped.js
+++ b/docs/src/pages/components/autocomplete/Grouped.js
@@ -19,9 +19,7 @@ export default function Grouped() {
       groupBy={option => option.firstLetter}
       getOptionLabel={option => option.title}
       style={{ width: 300 }}
-      renderInput={params => (
-        <TextField {...params} label="With categories" variant="outlined" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} label="With categories" variant="outlined" />}
     />
   );
 }
diff --git a/docs/src/pages/components/autocomplete/Grouped.tsx b/docs/src/pages/components/autocomplete/Grouped.tsx
index cf233d53353b0f..e9d2b1f28264ad 100644
--- a/docs/src/pages/components/autocomplete/Grouped.tsx
+++ b/docs/src/pages/components/autocomplete/Grouped.tsx
@@ -19,9 +19,7 @@ export default function Grouped() {
       groupBy={option => option.firstLetter}
       getOptionLabel={option => option.title}
       style={{ width: 300 }}
-      renderInput={params => (
-        <TextField {...params} label="With categories" variant="outlined" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} label="With categories" variant="outlined" />}
     />
   );
 }
diff --git a/docs/src/pages/components/autocomplete/Highlights.js b/docs/src/pages/components/autocomplete/Highlights.js
index a886cd6ecc3f4e..77cfdacffdfdb2 100644
--- a/docs/src/pages/components/autocomplete/Highlights.js
+++ b/docs/src/pages/components/autocomplete/Highlights.js
@@ -13,7 +13,7 @@ export default function Highlights() {
       options={top100Films}
       getOptionLabel={option => option.title}
       renderInput={params => (
-        <TextField {...params} label="Highlights" variant="outlined" fullWidth margin="normal" />
+        <TextField {...params} label="Highlights" variant="outlined" margin="normal" />
       )}
       renderOption={(option, { inputValue }) => {
         const matches = match(option.title, inputValue);
diff --git a/docs/src/pages/components/autocomplete/Highlights.tsx b/docs/src/pages/components/autocomplete/Highlights.tsx
index a886cd6ecc3f4e..77cfdacffdfdb2 100644
--- a/docs/src/pages/components/autocomplete/Highlights.tsx
+++ b/docs/src/pages/components/autocomplete/Highlights.tsx
@@ -13,7 +13,7 @@ export default function Highlights() {
       options={top100Films}
       getOptionLabel={option => option.title}
       renderInput={params => (
-        <TextField {...params} label="Highlights" variant="outlined" fullWidth margin="normal" />
+        <TextField {...params} label="Highlights" variant="outlined" margin="normal" />
       )}
       renderOption={(option, { inputValue }) => {
         const matches = match(option.title, inputValue);
diff --git a/docs/src/pages/components/autocomplete/Playground.js b/docs/src/pages/components/autocomplete/Playground.js
index 66a39f1b0be2cd..0b25dc1a48b29a 100644
--- a/docs/src/pages/components/autocomplete/Playground.js
+++ b/docs/src/pages/components/autocomplete/Playground.js
@@ -21,44 +21,38 @@ export default function Playground() {
         {...defaultProps}
         id="debug"
         debug
-        renderInput={params => <TextField {...params} label="debug" margin="normal" fullWidth />}
+        renderInput={params => <TextField {...params} label="debug" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="disable-close-on-select"
         disableCloseOnSelect
         renderInput={params => (
-          <TextField {...params} label="disableCloseOnSelect" margin="normal" fullWidth />
+          <TextField {...params} label="disableCloseOnSelect" margin="normal" />
         )}
       />
       <Autocomplete
         {...defaultProps}
         id="clear-on-escape"
         clearOnEscape
-        renderInput={params => (
-          <TextField {...params} label="clearOnEscape" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="clearOnEscape" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="disable-clearable"
         disableClearable
-        renderInput={params => (
-          <TextField {...params} label="disableClearable" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="disableClearable" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="include-input-in-list"
         includeInputInList
-        renderInput={params => (
-          <TextField {...params} label="includeInputInList" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="includeInputInList" margin="normal" />}
       />
       <Autocomplete
         {...flatProps}
         id="flat-demo"
-        renderInput={params => <TextField {...params} label="flat" margin="normal" fullWidth />}
+        renderInput={params => <TextField {...params} label="flat" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
@@ -67,64 +61,50 @@ export default function Playground() {
         onChange={(event, newValue) => {
           setValue(newValue);
         }}
-        renderInput={params => (
-          <TextField {...params} label="controlled" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="controlled" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="auto-complete"
         autoComplete
         includeInputInList
-        renderInput={params => (
-          <TextField {...params} label="autoComplete" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="autoComplete" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="disable-list-wrap"
         disableListWrap
-        renderInput={params => (
-          <TextField {...params} label="disableListWrap" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="disableListWrap" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="disable-open-on-focus"
         disableOpenOnFocus
-        renderInput={params => (
-          <TextField {...params} label="disableOpenOnFocus" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="disableOpenOnFocus" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="auto-highlight"
         autoHighlight
-        renderInput={params => (
-          <TextField {...params} label="autoHighlight" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="autoHighlight" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="auto-select"
         autoSelect
-        renderInput={params => (
-          <TextField {...params} label="autoSelect" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="autoSelect" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="disabled"
         disabled
-        renderInput={params => <TextField {...params} label="disabled" margin="normal" fullWidth />}
+        renderInput={params => <TextField {...params} label="disabled" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="disable-portal"
         disablePortal
-        renderInput={params => (
-          <TextField {...params} label="disablePortal" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="disablePortal" margin="normal" />}
       />
     </div>
   );
diff --git a/docs/src/pages/components/autocomplete/Playground.tsx b/docs/src/pages/components/autocomplete/Playground.tsx
index c3cae2e6f196b8..fffa508655ecd9 100644
--- a/docs/src/pages/components/autocomplete/Playground.tsx
+++ b/docs/src/pages/components/autocomplete/Playground.tsx
@@ -19,44 +19,38 @@ export default function Playground() {
         {...defaultProps}
         id="debug"
         debug
-        renderInput={params => <TextField {...params} label="debug" margin="normal" fullWidth />}
+        renderInput={params => <TextField {...params} label="debug" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="disable-close-on-select"
         disableCloseOnSelect
         renderInput={params => (
-          <TextField {...params} label="disableCloseOnSelect" margin="normal" fullWidth />
+          <TextField {...params} label="disableCloseOnSelect" margin="normal" />
         )}
       />
       <Autocomplete
         {...defaultProps}
         id="clear-on-escape"
         clearOnEscape
-        renderInput={params => (
-          <TextField {...params} label="clearOnEscape" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="clearOnEscape" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="disable-clearable"
         disableClearable
-        renderInput={params => (
-          <TextField {...params} label="disableClearable" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="disableClearable" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="include-input-in-list"
         includeInputInList
-        renderInput={params => (
-          <TextField {...params} label="includeInputInList" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="includeInputInList" margin="normal" />}
       />
       <Autocomplete
         {...flatProps}
         id="flat-demo"
-        renderInput={params => <TextField {...params} label="flat" margin="normal" fullWidth />}
+        renderInput={params => <TextField {...params} label="flat" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
@@ -65,64 +59,50 @@ export default function Playground() {
         onChange={(event: any, newValue: FilmOptionType | null) => {
           setValue(newValue);
         }}
-        renderInput={params => (
-          <TextField {...params} label="controlled" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="controlled" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="auto-complete"
         autoComplete
         includeInputInList
-        renderInput={params => (
-          <TextField {...params} label="autoComplete" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="autoComplete" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="disable-list-wrap"
         disableListWrap
-        renderInput={params => (
-          <TextField {...params} label="disableListWrap" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="disableListWrap" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="disable-open-on-focus"
         disableOpenOnFocus
-        renderInput={params => (
-          <TextField {...params} label="disableOpenOnFocus" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="disableOpenOnFocus" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="auto-highlight"
         autoHighlight
-        renderInput={params => (
-          <TextField {...params} label="autoHighlight" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="autoHighlight" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="auto-select"
         autoSelect
-        renderInput={params => (
-          <TextField {...params} label="autoSelect" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="autoSelect" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="disabled"
         disabled
-        renderInput={params => <TextField {...params} label="disabled" margin="normal" fullWidth />}
+        renderInput={params => <TextField {...params} label="disabled" margin="normal" />}
       />
       <Autocomplete
         {...defaultProps}
         id="disable-portal"
         disablePortal
-        renderInput={params => (
-          <TextField {...params} label="disablePortal" margin="normal" fullWidth />
-        )}
+        renderInput={params => <TextField {...params} label="disablePortal" margin="normal" />}
       />
     </div>
   );
diff --git a/docs/src/pages/components/autocomplete/Sizes.js b/docs/src/pages/components/autocomplete/Sizes.js
index 001e22db9b64af..7d43095461ea88 100644
--- a/docs/src/pages/components/autocomplete/Sizes.js
+++ b/docs/src/pages/components/autocomplete/Sizes.js
@@ -26,13 +26,7 @@ export default function Sizes() {
         getOptionLabel={option => option.title}
         defaultValue={top100Films[13]}
         renderInput={params => (
-          <TextField
-            {...params}
-            variant="standard"
-            label="Size small"
-            placeholder="Favorites"
-            fullWidth
-          />
+          <TextField {...params} variant="standard" label="Size small" placeholder="Favorites" />
         )}
       />
       <Autocomplete
@@ -43,13 +37,7 @@ export default function Sizes() {
         getOptionLabel={option => option.title}
         defaultValue={[top100Films[13]]}
         renderInput={params => (
-          <TextField
-            {...params}
-            variant="standard"
-            label="Size small"
-            placeholder="Favorites"
-            fullWidth
-          />
+          <TextField {...params} variant="standard" label="Size small" placeholder="Favorites" />
         )}
       />
       <Autocomplete
@@ -59,13 +47,7 @@ export default function Sizes() {
         getOptionLabel={option => option.title}
         defaultValue={top100Films[13]}
         renderInput={params => (
-          <TextField
-            {...params}
-            variant="outlined"
-            label="Size small"
-            placeholder="Favorites"
-            fullWidth
-          />
+          <TextField {...params} variant="outlined" label="Size small" placeholder="Favorites" />
         )}
       />
       <Autocomplete
@@ -76,13 +58,7 @@ export default function Sizes() {
         getOptionLabel={option => option.title}
         defaultValue={[top100Films[13]]}
         renderInput={params => (
-          <TextField
-            {...params}
-            variant="outlined"
-            label="Size small"
-            placeholder="Favorites"
-            fullWidth
-          />
+          <TextField {...params} variant="outlined" label="Size small" placeholder="Favorites" />
         )}
       />
       <Autocomplete
@@ -102,13 +78,7 @@ export default function Sizes() {
           ))
         }
         renderInput={params => (
-          <TextField
-            {...params}
-            variant="filled"
-            label="Size small"
-            placeholder="Favorites"
-            fullWidth
-          />
+          <TextField {...params} variant="filled" label="Size small" placeholder="Favorites" />
         )}
       />
       <Autocomplete
@@ -129,13 +99,7 @@ export default function Sizes() {
           ))
         }
         renderInput={params => (
-          <TextField
-            {...params}
-            variant="filled"
-            label="Size small"
-            placeholder="Favorites"
-            fullWidth
-          />
+          <TextField {...params} variant="filled" label="Size small" placeholder="Favorites" />
         )}
       />
     </div>
diff --git a/docs/src/pages/components/autocomplete/Sizes.tsx b/docs/src/pages/components/autocomplete/Sizes.tsx
index 5ade96cf2438b5..00ccb066e74b4a 100644
--- a/docs/src/pages/components/autocomplete/Sizes.tsx
+++ b/docs/src/pages/components/autocomplete/Sizes.tsx
@@ -28,13 +28,7 @@ export default function Sizes() {
         getOptionLabel={option => option.title}
         defaultValue={top100Films[13]}
         renderInput={params => (
-          <TextField
-            {...params}
-            variant="standard"
-            label="Size small"
-            placeholder="Favorites"
-            fullWidth
-          />
+          <TextField {...params} variant="standard" label="Size small" placeholder="Favorites" />
         )}
       />
       <Autocomplete
@@ -45,13 +39,7 @@ export default function Sizes() {
         getOptionLabel={option => option.title}
         defaultValue={[top100Films[13]]}
         renderInput={params => (
-          <TextField
-            {...params}
-            variant="standard"
-            label="Size small"
-            placeholder="Favorites"
-            fullWidth
-          />
+          <TextField {...params} variant="standard" label="Size small" placeholder="Favorites" />
         )}
       />
       <Autocomplete
@@ -61,13 +49,7 @@ export default function Sizes() {
         getOptionLabel={option => option.title}
         defaultValue={top100Films[13]}
         renderInput={params => (
-          <TextField
-            {...params}
-            variant="outlined"
-            label="Size small"
-            placeholder="Favorites"
-            fullWidth
-          />
+          <TextField {...params} variant="outlined" label="Size small" placeholder="Favorites" />
         )}
       />
       <Autocomplete
@@ -78,13 +60,7 @@ export default function Sizes() {
         getOptionLabel={option => option.title}
         defaultValue={[top100Films[13]]}
         renderInput={params => (
-          <TextField
-            {...params}
-            variant="outlined"
-            label="Size small"
-            placeholder="Favorites"
-            fullWidth
-          />
+          <TextField {...params} variant="outlined" label="Size small" placeholder="Favorites" />
         )}
       />
       <Autocomplete
@@ -104,13 +80,7 @@ export default function Sizes() {
           ))
         }
         renderInput={params => (
-          <TextField
-            {...params}
-            variant="filled"
-            label="Size small"
-            placeholder="Favorites"
-            fullWidth
-          />
+          <TextField {...params} variant="filled" label="Size small" placeholder="Favorites" />
         )}
       />
       <Autocomplete
@@ -131,13 +101,7 @@ export default function Sizes() {
           ))
         }
         renderInput={params => (
-          <TextField
-            {...params}
-            variant="filled"
-            label="Size small"
-            placeholder="Favorites"
-            fullWidth
-          />
+          <TextField {...params} variant="filled" label="Size small" placeholder="Favorites" />
         )}
       />
     </div>
diff --git a/docs/src/pages/components/autocomplete/Tags.js b/docs/src/pages/components/autocomplete/Tags.js
index e7b95e471d21b6..1b2ba569a145c1 100644
--- a/docs/src/pages/components/autocomplete/Tags.js
+++ b/docs/src/pages/components/autocomplete/Tags.js
@@ -31,7 +31,6 @@ export default function Tags() {
             variant="standard"
             label="Multiple values"
             placeholder="Favorites"
-            fullWidth
           />
         )}
       />
@@ -48,7 +47,6 @@ export default function Tags() {
             variant="outlined"
             label="filterSelectedOptions"
             placeholder="Favorites"
-            fullWidth
           />
         )}
       />
@@ -64,13 +62,7 @@ export default function Tags() {
           ))
         }
         renderInput={params => (
-          <TextField
-            {...params}
-            variant="filled"
-            label="freeSolo"
-            placeholder="Favorites"
-            fullWidth
-          />
+          <TextField {...params} variant="filled" label="freeSolo" placeholder="Favorites" />
         )}
       />
     </div>
diff --git a/docs/src/pages/components/autocomplete/Tags.tsx b/docs/src/pages/components/autocomplete/Tags.tsx
index 922ee2a64b0f9c..ea8fe3e72d3805 100644
--- a/docs/src/pages/components/autocomplete/Tags.tsx
+++ b/docs/src/pages/components/autocomplete/Tags.tsx
@@ -33,7 +33,6 @@ export default function Tags() {
             variant="standard"
             label="Multiple values"
             placeholder="Favorites"
-            fullWidth
           />
         )}
       />
@@ -50,7 +49,6 @@ export default function Tags() {
             variant="outlined"
             label="filterSelectedOptions"
             placeholder="Favorites"
-            fullWidth
           />
         )}
       />
@@ -66,13 +64,7 @@ export default function Tags() {
           ))
         }
         renderInput={params => (
-          <TextField
-            {...params}
-            variant="filled"
-            label="freeSolo"
-            placeholder="Favorites"
-            fullWidth
-          />
+          <TextField {...params} variant="filled" label="freeSolo" placeholder="Favorites" />
         )}
       />
     </div>
diff --git a/docs/src/pages/components/autocomplete/Virtualize.js b/docs/src/pages/components/autocomplete/Virtualize.js
index 8a46534e5b4079..b925891a168879 100644
--- a/docs/src/pages/components/autocomplete/Virtualize.js
+++ b/docs/src/pages/components/autocomplete/Virtualize.js
@@ -120,9 +120,7 @@ export default function Virtualize() {
       renderGroup={renderGroup}
       options={OPTIONS}
       groupBy={option => option[0].toUpperCase()}
-      renderInput={params => (
-        <TextField {...params} variant="outlined" label="10,000 options" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} variant="outlined" label="10,000 options" />}
       renderOption={option => <Typography noWrap>{option}</Typography>}
     />
   );
diff --git a/docs/src/pages/components/autocomplete/Virtualize.tsx b/docs/src/pages/components/autocomplete/Virtualize.tsx
index 17cd5e086d46a8..84aecff0ce08fc 100644
--- a/docs/src/pages/components/autocomplete/Virtualize.tsx
+++ b/docs/src/pages/components/autocomplete/Virtualize.tsx
@@ -115,9 +115,7 @@ export default function Virtualize() {
       renderGroup={renderGroup}
       options={OPTIONS}
       groupBy={option => option[0].toUpperCase()}
-      renderInput={params => (
-        <TextField {...params} variant="outlined" label="10,000 options" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} variant="outlined" label="10,000 options" />}
       renderOption={option => <Typography noWrap>{option}</Typography>}
     />
   );
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index 463ff0f2f7c529..b4ad82ef741d8f 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -386,6 +386,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
         {renderInput({
           id,
           disabled,
+          fullWidth: true,
           size: size === 'small' ? 'small' : undefined,
           InputLabelProps: getInputLabelProps(),
           InputProps: {