update demo

Author: ZeeshanTamboli

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,15 +16,14 @@ export default function AutocompleteHint() {
           }
         }
       }}
-      onBlur={() => {
+      onClose={() => {
         hint.current = '';
       }}
       onChange={(event, newValue) => {
         setInputValue(newValue && newValue.label ? newValue.label : '');
       }}
       disablePortal
       inputValue={inputValue}
-      blurOnSelect
       id="combo-box-hint-demo"
       options={top100Films}
       sx={{ width: 300 }}

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

@@ -16,15 +16,14 @@ export default function AutocompleteHint() {
           }
         }
       }}
-      onBlur={() => {
+      onClose={() => {
         hint.current = '';
       }}
       onChange={(event, newValue) => {
         setInputValue(newValue && newValue.label ? newValue.label : '');
       }}
       disablePortal
       inputValue={inputValue}
-      blurOnSelect
       id="combo-box-hint-demo"
       options={top100Films}
       sx={{ width: 300 }}