fix(input): fixed a sliding issue caused by the helper wrapper (#3966)

* If it is false and there is an error message or description it will create a div

* Update packages/components/input/src/input.tsx

* Update packages/components/select/src/select.tsx

* Update packages/components/input/src/textarea.tsx

* add changeset

* changeset update

.changeset/empty-helper-wrapper-div.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/select": patch
+"@nextui-org/input": patch
+---
+
+- Fixed a UI sliding issue caused by the helper wrapper being rendered when `isInvalid` was false but `errorMessage` was present

packages/components/input/src/input.tsx

@@ -43,15 +43,18 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
   }, [isClearable, getClearButtonProps]);
 
   const helperWrapper = useMemo(() => {
-    if (!hasHelper) return null;
+    const shouldShowError = isInvalid && errorMessage;
+    const hasContent = shouldShowError || description;
+
+    if (!hasHelper || !hasContent) return null;
 
     return (
       <div {...getHelperWrapperProps()}>
-        {isInvalid && errorMessage ? (
+        {shouldShowError ? (
           <div {...getErrorMessageProps()}>{errorMessage}</div>
-        ) : description ? (
+        ) : (
           <div {...getDescriptionProps()}>{description}</div>
-        ) : null}
+        )}
       </div>
     );
   }, [

packages/components/input/src/textarea.tsx

@@ -136,20 +136,23 @@ const Textarea = forwardRef<"textarea", TextAreaProps>(
       return <div {...getInnerWrapperProps()}>{content}</div>;
     }, [startContent, inputProps, endContent, getInnerWrapperProps]);
 
+    const shouldShowError = isInvalid && errorMessage;
+    const hasHelperContent = shouldShowError || description;
+
     return (
       <Component {...getBaseProps()}>
         {shouldLabelBeOutside ? labelContent : null}
         <div {...getInputWrapperProps()} data-has-multiple-rows={dataAttr(hasMultipleRows)}>
           {shouldLabelBeInside ? labelContent : null}
           {innerWrapper}
         </div>
-        {hasHelper ? (
+        {hasHelper && hasHelperContent ? (
           <div {...getHelperWrapperProps()}>
-            {isInvalid && errorMessage ? (
+            {shouldShowError ? (
               <div {...getErrorMessageProps()}>{errorMessage}</div>
-            ) : description ? (
+            ) : (
               <div {...getDescriptionProps()}>{description}</div>
-            ) : null}
+            )}
           </div>
         ) : null}
       </Component>

packages/components/select/src/select.tsx

@@ -53,15 +53,18 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
   const clonedIcon = cloneElement(selectorIcon as ReactElement, getSelectorIconProps());
 
   const helperWrapper = useMemo(() => {
-    if (!hasHelper) return null;
+    const shouldShowError = isInvalid && errorMessage;
+    const hasContent = shouldShowError || description;
+
+    if (!hasHelper || !hasContent) return null;
 
     return (
       <div {...getHelperWrapperProps()}>
-        {isInvalid && errorMessage ? (
+        {shouldShowError ? (
           <div {...getErrorMessageProps()}>{errorMessage}</div>
-        ) : description ? (
+        ) : (
           <div {...getDescriptionProps()}>{description}</div>
-        ) : null}
+        )}
       </div>
     );
   }, [