From 1df641cefceb45daf9de077f92b4df91a1c962a7 Mon Sep 17 00:00:00 2001
From: ManthanGajjar <manthangajjar08@gmail.com>
Date: Thu, 18 Jul 2024 15:35:04 +0530
Subject: [PATCH 1/4] [fix] autocomplete hint issue

---
 docs/data/joy/components/autocomplete/AutocompleteHint.js      | 3 +++
 docs/data/joy/components/autocomplete/AutocompleteHint.tsx     | 3 +++
 docs/data/material/components/autocomplete/AutocompleteHint.js | 3 +++
 .../data/material/components/autocomplete/AutocompleteHint.tsx | 3 +++
 4 files changed, 12 insertions(+)

diff --git a/docs/data/joy/components/autocomplete/AutocompleteHint.js b/docs/data/joy/components/autocomplete/AutocompleteHint.js
index 63eb76a467411a..9c8d5e4263c362 100644
--- a/docs/data/joy/components/autocomplete/AutocompleteHint.js
+++ b/docs/data/joy/components/autocomplete/AutocompleteHint.js
@@ -56,6 +56,9 @@ export default function AutocompleteHint() {
       onBlur={() => {
         hint.current = '';
       }}
+      onChange={(event, newValue) => {
+        setInputValue(newValue && newValue.label ? newValue.label : '');
+      }}
       inputValue={inputValue}
       filterOptions={(options, state) => {
         const displayOptions = options.filter((option) =>
diff --git a/docs/data/joy/components/autocomplete/AutocompleteHint.tsx b/docs/data/joy/components/autocomplete/AutocompleteHint.tsx
index 4d7c518c49500f..ca97492947d9e4 100644
--- a/docs/data/joy/components/autocomplete/AutocompleteHint.tsx
+++ b/docs/data/joy/components/autocomplete/AutocompleteHint.tsx
@@ -55,6 +55,9 @@ export default function AutocompleteHint() {
       onBlur={() => {
         hint.current = '';
       }}
+      onChange={(event, newValue) => {
+        setInputValue(newValue && newValue.label ? newValue.label : '');
+      }}
       inputValue={inputValue}
       filterOptions={(options, state) => {
         const displayOptions = options.filter((option) =>
diff --git a/docs/data/material/components/autocomplete/AutocompleteHint.js b/docs/data/material/components/autocomplete/AutocompleteHint.js
index 8d8d82e38cac92..0857ec767b3737 100644
--- a/docs/data/material/components/autocomplete/AutocompleteHint.js
+++ b/docs/data/material/components/autocomplete/AutocompleteHint.js
@@ -19,6 +19,9 @@ export default function AutocompleteHint() {
       onBlur={() => {
         hint.current = '';
       }}
+      onChange={(event, newValue) => {
+        setInputValue(newValue && newValue.label ? newValue.label : '');
+      }}
       disablePortal
       inputValue={inputValue}
       filterOptions={(options, state) => {
diff --git a/docs/data/material/components/autocomplete/AutocompleteHint.tsx b/docs/data/material/components/autocomplete/AutocompleteHint.tsx
index 8d8d82e38cac92..0857ec767b3737 100644
--- a/docs/data/material/components/autocomplete/AutocompleteHint.tsx
+++ b/docs/data/material/components/autocomplete/AutocompleteHint.tsx
@@ -19,6 +19,9 @@ export default function AutocompleteHint() {
       onBlur={() => {
         hint.current = '';
       }}
+      onChange={(event, newValue) => {
+        setInputValue(newValue && newValue.label ? newValue.label : '');
+      }}
       disablePortal
       inputValue={inputValue}
       filterOptions={(options, state) => {

From 08800633e63c65b542c0836339f5d85ec50cde2f Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Mon, 22 Jul 2024 22:48:01 +0530
Subject: [PATCH 2/4] fix Autocomplete hint demo

---
 .../autocomplete/AutocompleteHint.js          |  3 ---
 .../autocomplete/AutocompleteHint.tsx         |  3 ---
 .../autocomplete/AutocompleteHint.js          | 21 +++++++++----------
 .../autocomplete/AutocompleteHint.tsx         | 21 +++++++++----------
 4 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/docs/data/joy/components/autocomplete/AutocompleteHint.js b/docs/data/joy/components/autocomplete/AutocompleteHint.js
index 9c8d5e4263c362..63eb76a467411a 100644
--- a/docs/data/joy/components/autocomplete/AutocompleteHint.js
+++ b/docs/data/joy/components/autocomplete/AutocompleteHint.js
@@ -56,9 +56,6 @@ export default function AutocompleteHint() {
       onBlur={() => {
         hint.current = '';
       }}
-      onChange={(event, newValue) => {
-        setInputValue(newValue && newValue.label ? newValue.label : '');
-      }}
       inputValue={inputValue}
       filterOptions={(options, state) => {
         const displayOptions = options.filter((option) =>
diff --git a/docs/data/joy/components/autocomplete/AutocompleteHint.tsx b/docs/data/joy/components/autocomplete/AutocompleteHint.tsx
index ca97492947d9e4..4d7c518c49500f 100644
--- a/docs/data/joy/components/autocomplete/AutocompleteHint.tsx
+++ b/docs/data/joy/components/autocomplete/AutocompleteHint.tsx
@@ -55,9 +55,6 @@ export default function AutocompleteHint() {
       onBlur={() => {
         hint.current = '';
       }}
-      onChange={(event, newValue) => {
-        setInputValue(newValue && newValue.label ? newValue.label : '');
-      }}
       inputValue={inputValue}
       filterOptions={(options, state) => {
         const displayOptions = options.filter((option) =>
diff --git a/docs/data/material/components/autocomplete/AutocompleteHint.js b/docs/data/material/components/autocomplete/AutocompleteHint.js
index 0857ec767b3737..c3f4a7daa0457d 100644
--- a/docs/data/material/components/autocomplete/AutocompleteHint.js
+++ b/docs/data/material/components/autocomplete/AutocompleteHint.js
@@ -24,16 +24,7 @@ export default function AutocompleteHint() {
       }}
       disablePortal
       inputValue={inputValue}
-      filterOptions={(options, state) => {
-        const displayOptions = options.filter((option) =>
-          option.label
-            .toLowerCase()
-            .trim()
-            .includes(state.inputValue.toLowerCase().trim()),
-        );
-
-        return displayOptions;
-      }}
+      blurOnSelect
       id="combo-box-hint-demo"
       options={top100Films}
       sx={{ width: 300 }}
@@ -41,7 +32,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 0857ec767b3737..c3f4a7daa0457d 100644
--- a/docs/data/material/components/autocomplete/AutocompleteHint.tsx
+++ b/docs/data/material/components/autocomplete/AutocompleteHint.tsx
@@ -24,16 +24,7 @@ export default function AutocompleteHint() {
       }}
       disablePortal
       inputValue={inputValue}
-      filterOptions={(options, state) => {
-        const displayOptions = options.filter((option) =>
-          option.label
-            .toLowerCase()
-            .trim()
-            .includes(state.inputValue.toLowerCase().trim()),
-        );
-
-        return displayOptions;
-      }}
+      blurOnSelect
       id="combo-box-hint-demo"
       options={top100Films}
       sx={{ width: 300 }}
@@ -41,7 +32,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>

From db057a1feffe532a6486cf4b0090c0105d295e9b Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Mon, 22 Jul 2024 22:50:27 +0530
Subject: [PATCH 3/4] Update text

---
 docs/data/material/components/autocomplete/autocomplete.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/material/components/autocomplete/autocomplete.md b/docs/data/material/components/autocomplete/autocomplete.md
index 039af2306bd0bc..8fe8e978b255fb 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"}}
 

From 3c51e2af3f21dff1151e33238f7e9ad7bf801a4c Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Tue, 23 Jul 2024 10:41:42 +0530
Subject: [PATCH 4/4] update demo

---
 .../components/autocomplete/AutocompleteHint.js    | 14 ++++++++++++--
 .../components/autocomplete/AutocompleteHint.tsx   | 14 ++++++++++++--
 .../components/autocomplete/AutocompleteHint.js    |  3 +--
 .../components/autocomplete/AutocompleteHint.tsx   |  3 +--
 4 files changed, 26 insertions(+), 8 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 4d7c518c49500f..def836f4c2f06b 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 c3f4a7daa0457d..f473c1674b9728 100644
--- a/docs/data/material/components/autocomplete/AutocompleteHint.js
+++ b/docs/data/material/components/autocomplete/AutocompleteHint.js
@@ -16,7 +16,7 @@ export default function AutocompleteHint() {
           }
         }
       }}
-      onBlur={() => {
+      onClose={() => {
         hint.current = '';
       }}
       onChange={(event, newValue) => {
@@ -24,7 +24,6 @@ export default function AutocompleteHint() {
       }}
       disablePortal
       inputValue={inputValue}
-      blurOnSelect
       id="combo-box-hint-demo"
       options={top100Films}
       sx={{ width: 300 }}
diff --git a/docs/data/material/components/autocomplete/AutocompleteHint.tsx b/docs/data/material/components/autocomplete/AutocompleteHint.tsx
index c3f4a7daa0457d..f473c1674b9728 100644
--- a/docs/data/material/components/autocomplete/AutocompleteHint.tsx
+++ b/docs/data/material/components/autocomplete/AutocompleteHint.tsx
@@ -16,7 +16,7 @@ export default function AutocompleteHint() {
           }
         }
       }}
-      onBlur={() => {
+      onClose={() => {
         hint.current = '';
       }}
       onChange={(event, newValue) => {
@@ -24,7 +24,6 @@ export default function AutocompleteHint() {
       }}
       disablePortal
       inputValue={inputValue}
-      blurOnSelect
       id="combo-box-hint-demo"
       options={top100Films}
       sx={{ width: 300 }}