From 8b9b8d596790aece28634c07767f6123b118c25f Mon Sep 17 00:00:00 2001
From: Manthan Gajjar <31969308+ManthanGajjar@users.noreply.github.com>
Date: Tue, 23 Jul 2024 16:11:45 +0530
Subject: [PATCH] [docs][material-ui][joy-ui][Autocomplete] Fix `Hint` demo
 (#42990)

Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
---
 .../autocomplete/AutocompleteHint.js          | 14 +++++++++--
 .../autocomplete/AutocompleteHint.tsx         | 14 +++++++++--
 .../autocomplete/AutocompleteHint.js          | 25 ++++++++++---------
 .../autocomplete/AutocompleteHint.tsx         | 25 ++++++++++---------
 .../components/autocomplete/autocomplete.md   |  2 +-
 5 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/docs/data/joy/components/autocomplete/AutocompleteHint.js b/docs/data/joy/components/autocomplete/AutocompleteHint.js
index 63eb76a467411a..d70555d4f7132e 100644
--- a/docs/data/joy/components/autocomplete/AutocompleteHint.js
+++ b/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}
diff --git a/docs/data/joy/components/autocomplete/AutocompleteHint.tsx b/docs/data/joy/components/autocomplete/AutocompleteHint.tsx
index 4b8ff21f8a4d04..35304f7ceac31d 100644
--- a/docs/data/joy/components/autocomplete/AutocompleteHint.tsx
+++ b/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}
diff --git a/docs/data/material/components/autocomplete/AutocompleteHint.js b/docs/data/material/components/autocomplete/AutocompleteHint.js
index 8d8d82e38cac92..f473c1674b9728 100644
--- a/docs/data/material/components/autocomplete/AutocompleteHint.js
+++ b/docs/data/material/components/autocomplete/AutocompleteHint.js
@@ -16,21 +16,14 @@ 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 }}
@@ -38,7 +31,15 @@ export default function AutocompleteHint() {
         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>
diff --git a/docs/data/material/components/autocomplete/AutocompleteHint.tsx b/docs/data/material/components/autocomplete/AutocompleteHint.tsx
index 8d8d82e38cac92..f473c1674b9728 100644
--- a/docs/data/material/components/autocomplete/AutocompleteHint.tsx
+++ b/docs/data/material/components/autocomplete/AutocompleteHint.tsx
@@ -16,21 +16,14 @@ 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 }}
@@ -38,7 +31,15 @@ export default function AutocompleteHint() {
         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>
diff --git a/docs/data/material/components/autocomplete/autocomplete.md b/docs/data/material/components/autocomplete/autocomplete.md
index 99b41239c7ccda..9c5f1869cb1dbb 100644
--- a/docs/data/material/components/autocomplete/autocomplete.md
+++ b/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"}}