Apply suggestions from code review

Co-authored-by: Benny Joo <[email protected]>
Signed-off-by: Siriwat K <[email protected]>

Author: siriwatknp

docs/data/joy/components/autocomplete/ControllableStates.js

@@ -35,7 +35,7 @@ export default function ControllableStates() {
           }}
           inputValue={inputValue}
           onInputChange={(event, newInputValue) => {
-            setInputValue(newInputValue);
+            setInputValue(newInputValue ? `Label: ${newInputValue}` : newInputValue);
           }}
           options={options}
           renderInput={(params) => <Input {...params} placeholder="Controllable" />}

docs/data/joy/components/autocomplete/Playground.js

@@ -233,7 +233,7 @@ export default function Playground() {
               <div>
                 <FormLabel>readOnly</FormLabel>
                 <FormHelperText>
-                  The component becomes readonly. It is also supported for multiple
+                  The component becomes read-only. It is also supported in multiple
                   tags where the tag cannot be deleted.
                 </FormHelperText>
               </div>

docs/data/joy/components/autocomplete/autocomplete.md

@@ -26,7 +26,7 @@ The `Autocomplete` renders an input and a popup, after triggered by a pointer or
 
 ### Options structure
 
-By default, the component accepts the following options structures:
+By default, the component accepts the following structures for `options`:
 
 ```ts
 interface AutocompleteOption {
@@ -85,11 +85,11 @@ Each of the following examples demonstrates one feature of the Autocomplete comp
 
 ## Free solo
 
-Set `freeSolo` to true so the textbox can contain any arbitrary value.
+Set `freeSolo` to true so that the textbox can contain any arbitrary value.
 
 ### Search input
 
-The prop is designed to cover the primary use case of a **search input** with suggestions, e.g. Google search or react-autowhatever.
+This prop is designed to cover the primary use case of a **search input** with suggestions, e.g. Google search or react-autowhatever.
 
 {{"demo": "FreeSolo.js"}}
 
@@ -218,7 +218,7 @@ The autocomplete component comes with three sizes out of the box: `sm`, `md` (th
 To learn how to add more sizes to the component, check out [Themed components—Extend sizes](/joy-ui/customization/themed-components/#extend-sizes).
 :::
 
-The `size` can be controlled at the `FormControl`.
+The `size` can also be controlled at the `FormControl`.
 
 {{"demo": "SizeWithLabel.js"}}
 
@@ -232,7 +232,7 @@ The following demo relies on [autosuggest-highlight](https://github.com/moroshko
 
 ### GitHub's picker
 
-To reproduce GitHub's label picker, the `Autocomplete` is rendered inside a [`PopperUnstyled`](/base/react-popper/). To remove the popup behavior from the autocomplete, replace the listbox slot with the `List` component.
+To reproduce GitHub's label picker, the `Autocomplete` is rendered inside a [`PopperUnstyled`](/base/react-popper/). To remove the popup behavior from the autocomplete, replace the listbox slot with the [`List`](/joy-ui/react-list/) component.
 
 {{"demo": "GitHubLabel.js"}}
 

packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js

@@ -71,7 +71,7 @@ const defaultFilterOptions = createFilterOptions();
 const pageSize = 5;
 
 const defaultIsActiveElementInListbox = (listboxRef) =>
-  listboxRef.current !== null && listboxRef.current.parentElement.contains(document.activeElement);
+  listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
 
 export default function useAutocomplete(props) {
   const {

packages/mui-joy/src/Autocomplete/AutocompleteProps.ts

@@ -235,7 +235,7 @@ interface AutocompleteOwnProps<
    */
   popupIcon?: React.ReactNode;
   /**
-   * If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
+   * If `true`, the component becomes read-only. It is also supported in multiple tags where the tag cannot be deleted.
    * @default false
    */
   readOnly?: boolean;