[docs][material-ui][joy-ui][Autocomplete] Fix Hint demo (#42990)

Co-authored-by: ZeeshanTamboli <[email protected]>

Author: 2 people

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

@@ -15,7 +15,17 @@ const StyledDiv = styled('div')({
 function Wrapper({ children, hint, ...props }) {
   return (
     <StyledDiv {...props}>
-      <Typography sx={{ position: 'absolute', opacity: 0.6 }}>{hint}</Typography>
+      <Typography
+        sx={{
+          position: 'absolute',
+          opacity: 0.6,
+          overflow: 'hidden', // Hide overflow
+          whiteSpace: 'nowrap', // Prevent text wrapping
+          maxWidth: '100%', // Ensure the hint doesn't exceed container width
+        }}
+      >
+        {hint}
+      </Typography>
       {children}
     </StyledDiv>
   );
@@ -53,7 +63,7 @@ export default function AutocompleteHint() {
           }
         }
       }}
-      onBlur={() => {
+      onClose={() => {
         hint.current = '';
       }}
       inputValue={inputValue}

docs/data/joy/components/autocomplete/AutocompleteHint.tsx

@@ -19,7 +19,17 @@ type WrapperProps = {
 function Wrapper({ children, hint, ...props }: WrapperProps) {
   return (
     <StyledDiv {...props}>
-      <Typography sx={{ position: 'absolute', opacity: 0.6 }}>{hint}</Typography>
+      <Typography
+        sx={{
+          position: 'absolute',
+          opacity: 0.6,
+          overflow: 'hidden', // Hide overflow
+          whiteSpace: 'nowrap', // Prevent text wrapping
+          maxWidth: '100%', // Ensure the hint doesn't exceed container width
+        }}
+      >
+        {hint}
+      </Typography>
       {children}
     </StyledDiv>
   );
@@ -52,7 +62,7 @@ export default function AutocompleteHint() {
           }
         }
       }}
-      onBlur={() => {
+      onClose={() => {
         hint.current = '';
       }}
       inputValue={inputValue}

docs/data/material/components/autocomplete/AutocompleteHint.js

@@ -16,29 +16,30 @@ export default function AutocompleteHint() {
           }
         }
       }}
-      onBlur={() => {
+      onClose={() => {
         hint.current = '';
       }}
+      onChange={(event, newValue) => {
+        setInputValue(newValue && newValue.label ? newValue.label : '');
+      }}
       disablePortal
       inputValue={inputValue}
-      filterOptions={(options, state) => {
-        const displayOptions = options.filter((option) =>
-          option.label
-            .toLowerCase()
-            .trim()
-            .includes(state.inputValue.toLowerCase().trim()),
-        );
-
-        return displayOptions;
-      }}
       id="combo-box-hint-demo"
       options={top100Films}
       sx={{ width: 300 }}
       renderInput={(params) => {
         return (
           <Box sx={{ position: 'relative' }}>
             <Typography
-              sx={{ position: 'absolute', opacity: 0.5, left: 14, top: 16 }}
+              sx={{
+                position: 'absolute',
+                opacity: 0.5,
+                left: 14,
+                top: 16,
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                width: 'calc(100% - 75px)', // Adjust based on padding of TextField
+              }}
             >
               {hint.current}
             </Typography>

docs/data/material/components/autocomplete/AutocompleteHint.tsx

@@ -16,29 +16,30 @@ export default function AutocompleteHint() {
           }
         }
       }}
-      onBlur={() => {
+      onClose={() => {
         hint.current = '';
       }}
+      onChange={(event, newValue) => {
+        setInputValue(newValue && newValue.label ? newValue.label : '');
+      }}
       disablePortal
       inputValue={inputValue}
-      filterOptions={(options, state) => {
-        const displayOptions = options.filter((option) =>
-          option.label
-            .toLowerCase()
-            .trim()
-            .includes(state.inputValue.toLowerCase().trim()),
-        );
-
-        return displayOptions;
-      }}
       id="combo-box-hint-demo"
       options={top100Films}
       sx={{ width: 300 }}
       renderInput={(params) => {
         return (
           <Box sx={{ position: 'relative' }}>
             <Typography
-              sx={{ position: 'absolute', opacity: 0.5, left: 14, top: 16 }}
+              sx={{
+                position: 'absolute',
+                opacity: 0.5,
+                left: 14,
+                top: 16,
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                width: 'calc(100% - 75px)', // Adjust based on padding of TextField
+              }}
             >
               {hint.current}
             </Typography>

docs/data/material/components/autocomplete/autocomplete.md

@@ -282,7 +282,7 @@ Head to the [Customized hook](#customized-hook) section for a customization exam
 
 ### Hint
 
-The following demo shows how to add a hint feature to the Autocomplete using the `renderInput` and `filterOptions` props:
+The following demo shows how to add a hint feature to the Autocomplete:
 
 {{"demo": "AutocompleteHint.js"}}