diff --git a/packages/core/src/InlineEditor/InlineEditor.tsx b/packages/core/src/InlineEditor/InlineEditor.tsx index 433e5e3ccc..44fabaf9bd 100644 --- a/packages/core/src/InlineEditor/InlineEditor.tsx +++ b/packages/core/src/InlineEditor/InlineEditor.tsx @@ -10,6 +10,7 @@ import { HvButton, HvButtonProps } from "../Button"; import { useControlled } from "../hooks/useControlled"; import { useEnhancedEffect } from "../hooks/useEnhancedEffect"; import { HvInput, HvInputProps } from "../Input"; +import { HvTooltip } from "../Tooltip"; import { fixedForwardRef, PolymorphicComponentRef, @@ -97,10 +98,19 @@ export const HvInlineEditor = fixedForwardRef(function HvInlineEditor< const [cachedValue, setCachedValue] = useState(value); const inputRef = useRef(); const { activeTheme } = useTheme(); + const [isOverflowing, setIsOverflowing] = useState(false); const typographyStyles = activeTheme?.typography[variant] || {}; const { lineHeight } = typographyStyles; + const checkOverflow = () => { + if (inputRef.current) { + setIsOverflowing( + inputRef.current.scrollWidth > inputRef.current.clientWidth, + ); + } + }; + useEnhancedEffect(() => { const input = inputRef.current; if (editMode && input) { @@ -128,12 +138,14 @@ export const HvInlineEditor = fixedForwardRef(function HvInlineEditor< newValue = cachedValue; setEditMode(false); setValue(newValue); + checkOverflow(); } onKeyDown?.(event, newValue); }; const handleChange: HvInputProps["onChange"] = (event, val) => { setValue(val); + checkOverflow(); onChange?.(event, val); }; @@ -161,33 +173,35 @@ export const HvInlineEditor = fixedForwardRef(function HvInlineEditor< {...others} /> ) : ( - - } - className={cx(classes.button, { - [classes.largeText]: parseInt(lineHeight as string, 10) >= 28, - })} - onClick={handleClick} - disabled={disabled} - {...buttonProps} - > - + + } + className={cx(classes.button, { + [classes.largeText]: parseInt(lineHeight as string, 10) >= 28, + })} + onClick={handleClick} + disabled={disabled} + {...buttonProps} > - {value || placeholder} - - + + {value || placeholder} + + + )} );