diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js
index abe4aee63f648b..46dad094bfe670 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js
@@ -60,9 +60,9 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(props, r
             },
             input: {
               className: 'Autocomplete__input',
+              ...getInputProps(),
             },
           }}
-          {...getInputProps()}
         />
         {hasClearIcon && (
           <Button
@@ -273,7 +273,7 @@ function Styles() {
         box-sizing: border-box;
         padding: 6px;
         margin: 12px 0;
-        max-width: 320px;
+        width: 100%;
         border-radius: 12px;
         overflow: auto;
         outline: 0px;
@@ -321,6 +321,12 @@ function Styles() {
           color: ${isDarkMode ? cyan[100] : cyan[900]};
         }
       }
+
+      .Autocomplete__no-options {
+        list-style: none;
+        padding: 8px;
+        cursor: default;
+      }
       `}
     </style>
   );
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx
index 85eb4e6c2c5ec5..7bfb7211fc5019 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx
@@ -62,9 +62,9 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(
             },
             input: {
               className: 'Autocomplete__input',
+              ...getInputProps(),
             },
           }}
-          {...getInputProps()}
         />
         {hasClearIcon && (
           <Button
@@ -247,7 +247,7 @@ function Styles() {
         box-sizing: border-box;
         padding: 6px;
         margin: 12px 0;
-        max-width: 320px;
+        width: 100%;
         border-radius: 12px;
         overflow: auto;
         outline: 0px;
@@ -295,6 +295,12 @@ function Styles() {
           color: ${isDarkMode ? cyan[100] : cyan[900]};
         }
       }
+
+      .Autocomplete__no-options {
+        list-style: none;
+        padding: 8px;
+        cursor: default;
+      }
       `}
     </style>
   );
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js
index 6186620373a3b5..124608bce816bb 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.js
@@ -31,6 +31,7 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(props, r
     focused,
     anchorEl,
     setAnchorEl,
+    groupedOptions,
   } = useAutocomplete({
     ...props,
     componentName: 'BaseAutocompleteIntroduction',
@@ -97,7 +98,7 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(props, r
             {...getListboxProps()}
             className="text-sm box-border p-1.5 my-3 mx-0 min-w-[320px] rounded-xl overflow-auto outline-0 max-h-[300px] z-[1] bg-white dark:bg-gray-800 border border-solid border-gray-200 dark:border-gray-900 text-gray-900 dark:text-gray-200 shadow-[0_4px_30px_transparent] shadow-gray-200 dark:shadow-gray-900"
           >
-            {options.map((option, index) => {
+            {groupedOptions.map((option, index) => {
               const optionProps = getOptionProps({ option, index });
 
               return (
@@ -110,7 +111,7 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(props, r
               );
             })}
 
-            {options.length === 0 && (
+            {groupedOptions.length === 0 && (
               <li className="list-none p-2 cursor-default">No results</li>
             )}
           </ul>
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx
index bb77270a37a745..fb413185ec8894 100644
--- a/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx
+++ b/docs/data/base/components/autocomplete/AutocompleteIntroduction/tailwind/index.tsx
@@ -33,6 +33,7 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(
     focused,
     anchorEl,
     setAnchorEl,
+    groupedOptions,
   } = useAutocomplete({
     ...props,
     componentName: 'BaseAutocompleteIntroduction',
@@ -98,7 +99,7 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(
             {...getListboxProps()}
             className="text-sm box-border p-1.5 my-3 mx-0 min-w-[320px] rounded-xl overflow-auto outline-0 max-h-[300px] z-[1] bg-white dark:bg-gray-800 border border-solid border-gray-200 dark:border-gray-900 text-gray-900 dark:text-gray-200 shadow-[0_4px_30px_transparent] shadow-gray-200 dark:shadow-gray-900"
           >
-            {(options as typeof top100Films).map((option, index) => {
+            {(groupedOptions as typeof top100Films).map((option, index) => {
               const optionProps = getOptionProps({ option, index });
 
               return (
@@ -111,7 +112,7 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(
               );
             })}
 
-            {options.length === 0 && (
+            {groupedOptions.length === 0 && (
               <li className="list-none p-2 cursor-default">No results</li>
             )}
           </ul>
diff --git a/docs/data/base/components/autocomplete/ControlledStates/css/index.js b/docs/data/base/components/autocomplete/ControlledStates/css/index.js
index ea0ae1a29402f9..0bffd751319adc 100644
--- a/docs/data/base/components/autocomplete/ControlledStates/css/index.js
+++ b/docs/data/base/components/autocomplete/ControlledStates/css/index.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import useAutocomplete from '@mui/base/useAutocomplete';
 import { useTheme } from '@mui/system';
+import clsx from 'clsx';
 
 const options = ['Firefox', 'Google Chrome', 'Microsoft Edge', 'Safari', 'Opera'];
 
@@ -14,6 +15,7 @@ export default function ControlledStates() {
     getListboxProps,
     getOptionProps,
     groupedOptions,
+    focused,
   } = useAutocomplete({
     id: 'controlled-state-demo',
     options,
@@ -32,7 +34,7 @@ export default function ControlledStates() {
         inputValue: <code>{inputValue ?? ' '}</code>
       </pre>
       <div className="ControlledStates">
-        <div {...getRootProps()} className="root">
+        <div {...getRootProps()} className={clsx('root', focused && 'focused')}>
           <input {...getInputProps()} className="input" />
         </div>
         {groupedOptions.length > 0 && (
diff --git a/docs/data/base/components/autocomplete/ControlledStates/css/index.tsx b/docs/data/base/components/autocomplete/ControlledStates/css/index.tsx
index c76a6279be0edd..7a944c0b00f351 100644
--- a/docs/data/base/components/autocomplete/ControlledStates/css/index.tsx
+++ b/docs/data/base/components/autocomplete/ControlledStates/css/index.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import useAutocomplete from '@mui/base/useAutocomplete';
 import { useTheme } from '@mui/system';
+import clsx from 'clsx';
 
 const options = ['Firefox', 'Google Chrome', 'Microsoft Edge', 'Safari', 'Opera'];
 
@@ -14,6 +15,7 @@ export default function ControlledStates() {
     getListboxProps,
     getOptionProps,
     groupedOptions,
+    focused,
   } = useAutocomplete({
     id: 'controlled-state-demo',
     options,
@@ -32,7 +34,7 @@ export default function ControlledStates() {
         inputValue: <code>{inputValue ?? ' '}</code>
       </pre>
       <div className="ControlledStates">
-        <div {...getRootProps()} className="root">
+        <div {...getRootProps()} className={clsx('root', focused && 'focused')}>
           <input {...getInputProps()} className="input" />
         </div>
         {groupedOptions.length > 0 && (
diff --git a/docs/data/base/components/autocomplete/ControlledStates/system/index.js b/docs/data/base/components/autocomplete/ControlledStates/system/index.js
index fa7df87531053a..ce9b573aeb234b 100644
--- a/docs/data/base/components/autocomplete/ControlledStates/system/index.js
+++ b/docs/data/base/components/autocomplete/ControlledStates/system/index.js
@@ -14,6 +14,7 @@ export default function ControlledStates() {
     getListboxProps,
     getOptionProps,
     groupedOptions,
+    focused,
   } = useAutocomplete({
     id: 'controlled-state-demo',
     options,
@@ -32,7 +33,7 @@ export default function ControlledStates() {
         inputValue: <code>{inputValue ?? ' '}</code>
       </Pre>
       <StyledAutocomplete>
-        <StyledInputRoot {...getRootProps()}>
+        <StyledInputRoot {...getRootProps()} className={focused ? 'focused' : ''}>
           <StyledInput {...getInputProps()} />
         </StyledInputRoot>
         {groupedOptions.length > 0 && (
diff --git a/docs/data/base/components/autocomplete/ControlledStates/system/index.tsx b/docs/data/base/components/autocomplete/ControlledStates/system/index.tsx
index 88fdb0d2e8bc3b..ec09cb623c8087 100644
--- a/docs/data/base/components/autocomplete/ControlledStates/system/index.tsx
+++ b/docs/data/base/components/autocomplete/ControlledStates/system/index.tsx
@@ -14,6 +14,7 @@ export default function ControlledStates() {
     getListboxProps,
     getOptionProps,
     groupedOptions,
+    focused,
   } = useAutocomplete({
     id: 'controlled-state-demo',
     options,
@@ -32,7 +33,7 @@ export default function ControlledStates() {
         inputValue: <code>{inputValue ?? ' '}</code>
       </Pre>
       <StyledAutocomplete>
-        <StyledInputRoot {...getRootProps()}>
+        <StyledInputRoot {...getRootProps()} className={focused ? 'focused' : ''}>
           <StyledInput {...getInputProps()} />
         </StyledInputRoot>
         {groupedOptions.length > 0 && (
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/css/index.js b/docs/data/base/components/autocomplete/UseAutocomplete/css/index.js
index 54a644b2c2ce93..ab3b2587436106 100644
--- a/docs/data/base/components/autocomplete/UseAutocomplete/css/index.js
+++ b/docs/data/base/components/autocomplete/UseAutocomplete/css/index.js
@@ -30,7 +30,7 @@ export default function UseAutocomplete() {
           htmlFor="use-autocomplete-demo"
           className="label"
         >
-          Pick a movie:
+          Pick a movie
         </label>
         <div {...getRootProps()} className={clsx('root', focused && 'focused')}>
           <input {...getInputProps()} className="input" />
@@ -148,7 +148,7 @@ function Styles() {
         box-sizing: border-box;
         padding: 6px;
         margin: 12px 0;
-        max-width: 320px;
+        width: 320px;
         border-radius: 12px;
         overflow: auto;
         outline: 0px;
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/css/index.tsx b/docs/data/base/components/autocomplete/UseAutocomplete/css/index.tsx
index 7e8d4e1bf9e2ec..7f8799dcc776db 100644
--- a/docs/data/base/components/autocomplete/UseAutocomplete/css/index.tsx
+++ b/docs/data/base/components/autocomplete/UseAutocomplete/css/index.tsx
@@ -32,7 +32,7 @@ export default function UseAutocomplete() {
           htmlFor="use-autocomplete-demo"
           className="label"
         >
-          Pick a movie:
+          Pick a movie
         </label>
         <div {...getRootProps()} className={clsx('root', focused && 'focused')}>
           <input {...getInputProps()} className="input" />
@@ -150,7 +150,7 @@ function Styles() {
         box-sizing: border-box;
         padding: 6px;
         margin: 12px 0;
-        max-width: 320px;
+        width: 320px;
         border-radius: 12px;
         overflow: auto;
         outline: 0px;
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/system/index.js b/docs/data/base/components/autocomplete/UseAutocomplete/system/index.js
index 4c3a6b613b25e0..fdf3ebb9873c67 100644
--- a/docs/data/base/components/autocomplete/UseAutocomplete/system/index.js
+++ b/docs/data/base/components/autocomplete/UseAutocomplete/system/index.js
@@ -23,7 +23,7 @@ export default function UseAutocomplete() {
 
   return (
     <div style={{ marginBottom: 24 }}>
-      <Label {...getInputLabelProps()}>Label</Label>
+      <StyledLabel {...getInputLabelProps()}>Pick a movie</StyledLabel>
       <StyledAutocompleteRoot
         {...getRootProps()}
         className={focused ? 'focused' : ''}
@@ -65,7 +65,7 @@ const grey = {
   900: '#24292f',
 };
 
-const Label = styled('label')`
+const StyledLabel = styled('label')`
   display: block;
   font-family: sans-serif;
   font-size: 14px;
@@ -126,7 +126,7 @@ const StyledListbox = styled('ul')(
   box-sizing: border-box;
   padding: 6px;
   margin: 12px 0;
-  max-width: 320px;
+  width: 320px;
   border-radius: 12px;
   overflow: auto;
   outline: 0px;
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx b/docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx
index 19f5d6b4bf4885..7e025105dc73c3 100644
--- a/docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx
+++ b/docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx
@@ -25,7 +25,7 @@ export default function UseAutocomplete() {
 
   return (
     <div style={{ marginBottom: 24 }}>
-      <Label {...getInputLabelProps()}>Label</Label>
+      <StyledLabel {...getInputLabelProps()}>Pick a movie</StyledLabel>
       <StyledAutocompleteRoot
         {...getRootProps()}
         className={focused ? 'focused' : ''}
@@ -67,7 +67,7 @@ const grey = {
   900: '#24292f',
 };
 
-const Label = styled('label')`
+const StyledLabel = styled('label')`
   display: block;
   font-family: sans-serif;
   font-size: 14px;
@@ -128,7 +128,7 @@ const StyledListbox = styled('ul')(
   box-sizing: border-box;
   padding: 6px;
   margin: 12px 0;
-  max-width: 320px;
+  width: 320px;
   border-radius: 12px;
   overflow: auto;
   outline: 0px;
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx.preview b/docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx.preview
index a5608530f7f9d7..1d31a9250a4ceb 100644
--- a/docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx.preview
+++ b/docs/data/base/components/autocomplete/UseAutocomplete/system/index.tsx.preview
@@ -1,4 +1,4 @@
-<Label {...getInputLabelProps()}>Label</Label>
+<StyledLabel {...getInputLabelProps()}>Pick a movie</StyledLabel>
 <StyledAutocompleteRoot
   {...getRootProps()}
   className={focused ? 'focused' : ''}
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.js b/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.js
index 40b25dd72fb56b..b38242055a8d76 100644
--- a/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.js
+++ b/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.js
@@ -29,7 +29,7 @@ export default function UseAutocomplete() {
         htmlFor="use-autocomplete-demo"
         className="block text-sm font-medium mb-1"
       >
-        Pick a movie:
+        Pick a movie
       </label>
       <div className="relative w-80">
         <div
diff --git a/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.tsx b/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.tsx
index 4f4f2a7ddb099a..f5cc4600d90ee6 100644
--- a/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.tsx
+++ b/docs/data/base/components/autocomplete/UseAutocomplete/tailwind/index.tsx
@@ -31,7 +31,7 @@ export default function UseAutocomplete() {
         htmlFor="use-autocomplete-demo"
         className="block text-sm font-medium mb-1"
       >
-        Pick a movie:
+        Pick a movie
       </label>
       <div className="relative w-80">
         <div
diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper/css/index.js b/docs/data/base/components/autocomplete/UseAutocompletePopper/css/index.js
index d72372d47a7366..06025e26e5dfce 100644
--- a/docs/data/base/components/autocomplete/UseAutocompletePopper/css/index.js
+++ b/docs/data/base/components/autocomplete/UseAutocompletePopper/css/index.js
@@ -37,20 +37,20 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(props, r
             root: { className: 'UseAutocompletePopper__popper' },
           }}
         >
-          {groupedOptions.length > 0 ? (
-            <ul {...getListboxProps()} className="UseAutocompletePopper__listbox">
-              {groupedOptions.map((option, index) => (
+          <ul {...getListboxProps()} className="UseAutocompletePopper__listbox">
+            {groupedOptions.length > 0 ? (
+              groupedOptions.map((option, index) => (
                 <li
                   {...getOptionProps({ option, index })}
                   className="UseAutocompletePopper__option"
                 >
                   {option.label}
                 </li>
-              ))}
-            </ul>
-          ) : (
-            <li className="UseAutocompletePopper__no-options">No results</li>
-          )}
+              ))
+            ) : (
+              <li className="UseAutocompletePopper__no-options">No results</li>
+            )}
+          </ul>
         </Popper>
       )}
 
@@ -166,7 +166,7 @@ function Styles() {
         box-sizing: border-box;
         padding: 6px;
         margin: 12px 0;
-        max-width: 320px;
+        width: 100%;
         border-radius: 12px;
         overflow: auto;
         outline: 0px;
@@ -214,6 +214,12 @@ function Styles() {
           color: ${isDarkMode ? cyan[100] : cyan[900]};
         }
       }
+
+      .UseAutocompletePopper__no-options {
+        list-style: none;
+        padding: 8px;
+        cursor: default;
+      }
       `}
     </style>
   );
diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper/css/index.tsx b/docs/data/base/components/autocomplete/UseAutocompletePopper/css/index.tsx
index 41b7bb0ae057d1..58a04c41c022e2 100644
--- a/docs/data/base/components/autocomplete/UseAutocompletePopper/css/index.tsx
+++ b/docs/data/base/components/autocomplete/UseAutocompletePopper/css/index.tsx
@@ -40,20 +40,20 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(
             root: { className: 'UseAutocompletePopper__popper' },
           }}
         >
-          {groupedOptions.length > 0 ? (
-            <ul {...getListboxProps()} className="UseAutocompletePopper__listbox">
-              {(groupedOptions as typeof top100Films).map((option, index) => (
+          <ul {...getListboxProps()} className="UseAutocompletePopper__listbox">
+            {groupedOptions.length > 0 ? (
+              (groupedOptions as typeof top100Films).map((option, index) => (
                 <li
                   {...getOptionProps({ option, index })}
                   className="UseAutocompletePopper__option"
                 >
                   {option.label}
                 </li>
-              ))}
-            </ul>
-          ) : (
-            <li className="UseAutocompletePopper__no-options">No results</li>
-          )}
+              ))
+            ) : (
+              <li className="UseAutocompletePopper__no-options">No results</li>
+            )}
+          </ul>
         </Popper>
       )}
       <Styles />
@@ -173,7 +173,7 @@ function Styles() {
         box-sizing: border-box;
         padding: 6px;
         margin: 12px 0;
-        max-width: 320px;
+        width: 100%;
         border-radius: 12px;
         overflow: auto;
         outline: 0px;
@@ -221,6 +221,12 @@ function Styles() {
           color: ${isDarkMode ? cyan[100] : cyan[900]};
         }
       }
+
+      .UseAutocompletePopper__no-options {
+        list-style: none;
+        padding: 8px;
+        cursor: default;
+      }
       `}
     </style>
   );
diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper/system/index.js b/docs/data/base/components/autocomplete/UseAutocompletePopper/system/index.js
index 56a1be68d54c72..20f95577db3886 100644
--- a/docs/data/base/components/autocomplete/UseAutocompletePopper/system/index.js
+++ b/docs/data/base/components/autocomplete/UseAutocompletePopper/system/index.js
@@ -36,17 +36,17 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(props, r
             root: StyledPopper,
           }}
         >
-          {groupedOptions.length > 0 ? (
-            <StyledListbox {...getListboxProps()}>
-              {groupedOptions.map((option, index) => (
+          <StyledListbox {...getListboxProps()}>
+            {groupedOptions.length > 0 ? (
+              groupedOptions.map((option, index) => (
                 <StyledOption {...getOptionProps({ option, index })}>
                   {option.label}
                 </StyledOption>
-              ))}
-            </StyledListbox>
-          ) : (
-            <StyledNoOptions>No results</StyledNoOptions>
-          )}
+              ))
+            ) : (
+              <StyledNoOptions>No results</StyledNoOptions>
+            )}
+          </StyledListbox>
         </Popper>
       )}
     </React.Fragment>
diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper/system/index.tsx b/docs/data/base/components/autocomplete/UseAutocompletePopper/system/index.tsx
index fa68ccb46150fb..3e80b42a3ea6c0 100644
--- a/docs/data/base/components/autocomplete/UseAutocompletePopper/system/index.tsx
+++ b/docs/data/base/components/autocomplete/UseAutocompletePopper/system/index.tsx
@@ -39,17 +39,17 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(
             root: StyledPopper,
           }}
         >
-          {groupedOptions.length > 0 ? (
-            <StyledListbox {...getListboxProps()}>
-              {(groupedOptions as typeof top100Films).map((option, index) => (
+          <StyledListbox {...getListboxProps()}>
+            {groupedOptions.length > 0 ? (
+              (groupedOptions as typeof top100Films).map((option, index) => (
                 <StyledOption {...getOptionProps({ option, index })}>
                   {option.label}
                 </StyledOption>
-              ))}
-            </StyledListbox>
-          ) : (
-            <StyledNoOptions>No results</StyledNoOptions>
-          )}
+              ))
+            ) : (
+              <StyledNoOptions>No results</StyledNoOptions>
+            )}
+          </StyledListbox>
         </Popper>
       )}
     </React.Fragment>
diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper/tailwind/index.js b/docs/data/base/components/autocomplete/UseAutocompletePopper/tailwind/index.js
index 7964dbeda06466..845ceda51b350e 100644
--- a/docs/data/base/components/autocomplete/UseAutocompletePopper/tailwind/index.js
+++ b/docs/data/base/components/autocomplete/UseAutocompletePopper/tailwind/index.js
@@ -47,23 +47,23 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(props, r
             },
           }}
         >
-          {groupedOptions.length > 0 ? (
-            <ul
-              {...getListboxProps()}
-              className="text-sm box-border p-1.5 my-3 mx-0 w-full rounded-xl overflow-auto outline-0 max-h-[300px] z-[1] absolute inset-x-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 shadow shadow-slate-200 dark:shadow-slate-900"
-            >
-              {groupedOptions.map((option, index) => (
+          <ul
+            {...getListboxProps()}
+            className="text-sm box-border p-1.5 my-3 mx-0 w-full rounded-xl overflow-auto outline-0 max-h-[300px] z-[1] absolute inset-x-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 shadow shadow-slate-200 dark:shadow-slate-900"
+          >
+            {groupedOptions.length > 0 ? (
+              groupedOptions.map((option, index) => (
                 <li
                   {...getOptionProps({ option, index })}
                   className="list-none p-2 rounded-lg cursor-default last-of-type:border-b-0 hover:cursor-pointer aria-selected:bg-purple-100 dark:aria-selected:bg-purple-900 aria-selected:text-purple-900 dark:aria-selected:text-purple-100 ui-focused:bg-slate-100 dark:ui-focused:bg-slate-700 ui-focus-visible:bg-slate-100 dark:ui-focus-visible:bg-slate-800 ui-focused:text-slate-900 dark:ui-focused:text-slate-300 ui-focus-visible:text-slate-900 dark:ui-focus-visible:text-slate-300 ui-focus-visible:shadow-[0_0_0_3px_transparent] ui-focus-visible:shadow-purple-200 dark:ui-focus-visible:shadow-purple-500 ui-focused:aria-selected:bg-purple-100 dark:ui-focused:aria-selected:bg-purple-900 ui-focus-visible:aria-selected:bg-purple-100 dark:ui-focus-visible:aria-selected:bg-purple-900 ui-focused:aria-selected:text-purple-900 dark:ui-focused:aria-selected:text-purple-100 ui-focus-visible:aria-selected:text-purple-900 dark:ui-focus-visible:aria-selected:text-purple-100"
                 >
                   {option.label}
                 </li>
-              ))}
-            </ul>
-          ) : (
-            <li className="list-none p-2 cursor-default">No results</li>
-          )}
+              ))
+            ) : (
+              <li className="list-none p-2 cursor-default">No results</li>
+            )}
+          </ul>
         </Popper>
       )}
     </div>
diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper/tailwind/index.tsx b/docs/data/base/components/autocomplete/UseAutocompletePopper/tailwind/index.tsx
index e0c03964fd4047..672cc993d4a82a 100644
--- a/docs/data/base/components/autocomplete/UseAutocompletePopper/tailwind/index.tsx
+++ b/docs/data/base/components/autocomplete/UseAutocompletePopper/tailwind/index.tsx
@@ -50,23 +50,23 @@ const CustomAutocomplete = React.forwardRef(function CustomAutocomplete(
             },
           }}
         >
-          {groupedOptions.length > 0 ? (
-            <ul
-              {...getListboxProps()}
-              className="text-sm box-border p-1.5 my-3 mx-0 w-full rounded-xl overflow-auto outline-0 max-h-[300px] z-[1] absolute inset-x-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 shadow shadow-slate-200 dark:shadow-slate-900"
-            >
-              {(groupedOptions as typeof top100Films).map((option, index) => (
+          <ul
+            {...getListboxProps()}
+            className="text-sm box-border p-1.5 my-3 mx-0 w-full rounded-xl overflow-auto outline-0 max-h-[300px] z-[1] absolute inset-x-0 bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-200 shadow shadow-slate-200 dark:shadow-slate-900"
+          >
+            {groupedOptions.length > 0 ? (
+              (groupedOptions as typeof top100Films).map((option, index) => (
                 <li
                   {...getOptionProps({ option, index })}
                   className="list-none p-2 rounded-lg cursor-default last-of-type:border-b-0 hover:cursor-pointer aria-selected:bg-purple-100 dark:aria-selected:bg-purple-900 aria-selected:text-purple-900 dark:aria-selected:text-purple-100 ui-focused:bg-slate-100 dark:ui-focused:bg-slate-700 ui-focus-visible:bg-slate-100 dark:ui-focus-visible:bg-slate-800 ui-focused:text-slate-900 dark:ui-focused:text-slate-300 ui-focus-visible:text-slate-900 dark:ui-focus-visible:text-slate-300 ui-focus-visible:shadow-[0_0_0_3px_transparent] ui-focus-visible:shadow-purple-200 dark:ui-focus-visible:shadow-purple-500 ui-focused:aria-selected:bg-purple-100 dark:ui-focused:aria-selected:bg-purple-900 ui-focus-visible:aria-selected:bg-purple-100 dark:ui-focus-visible:aria-selected:bg-purple-900 ui-focused:aria-selected:text-purple-900 dark:ui-focused:aria-selected:text-purple-100 ui-focus-visible:aria-selected:text-purple-900 dark:ui-focus-visible:aria-selected:text-purple-100"
                 >
                   {option.label}
                 </li>
-              ))}
-            </ul>
-          ) : (
-            <li className="list-none p-2 cursor-default">No results</li>
-          )}
+              ))
+            ) : (
+              <li className="list-none p-2 cursor-default">No results</li>
+            )}
+          </ul>
         </Popper>
       )}
     </div>