fix: uncontrolled input's label position (#297)

Author: Nikolai Lopin

src/components/Input/InnerInput.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { extractClassNameProps, extractWidthProps, extractWrapperMarginProps } from '../../utils/extractProps';
 import { useGeneratedId } from '../../utils/hooks/useGeneratedId';
 import { BottomLinedInput } from './BottomLinedInput';
@@ -13,31 +13,36 @@ const InnerInput = forwardRef<HTMLDivElement, InputWrapperProps & InputProps>(
         const { classNameProps, restProps: withoutClassName } = extractClassNameProps(props);
         const { marginProps, restProps: withoutMargin } = extractWrapperMarginProps(withoutClassName);
         const { widthProps, restProps } = extractWidthProps(withoutMargin);
+        // TODO replace with ref when implementing https://github.com/freenowtech/wave/issues/169
+        const inputRef = useRef<HTMLInputElement>();
 
         const { label, onChange, size, id: providedId, variant, ...rest } = restProps;
         const id = useGeneratedId(providedId);
 
-        const [hasValue, setHasValue] = useState(rest.value && rest.value.toString().length > 0);
+        const [hasValue, setHasValue] = useState(rest?.value?.toString().length > 0);
+        const hasUncontrolledValue = inputRef?.current?.value?.length > 0;
 
-        const handleChange = event => {
+        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+            setHasValue(event.target.value.length > 0);
             if (onChange) {
                 onChange(event);
             }
         };
 
         useEffect(() => {
-            setHasValue(rest.value && rest.value.toString().length > 0);
+            setHasValue(rest?.value?.toString().length > 0);
         }, [rest.value]);
 
         if (variant === 'boxed') {
             return (
                 <InputWrapper ref={ref} {...classNameProps} {...marginProps} {...widthProps}>
                     <BoxedInput
                         {...rest}
+                        ref={inputRef}
                         variant={variant}
                         id={id}
                         size={size}
-                        hasValue={hasValue}
+                        hasValue={hasValue || hasUncontrolledValue}
                         onChange={handleChange}
                     />
                     {label && (
@@ -57,7 +62,7 @@ const InnerInput = forwardRef<HTMLDivElement, InputWrapperProps & InputProps>(
                         variant={variant}
                         id={id}
                         size={size}
-                        hasValue={hasValue}
+                        hasValue={hasValue || hasUncontrolledValue}
                         onChange={handleChange}
                     />
                     {label && (

src/components/Input/InputProps.ts

@@ -1,7 +1,7 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
 import { ResponsiveValue } from 'styled-system';
 
-interface InputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'width'> {
+interface InputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'width'> {
     variant?: ResponsiveValue<'boxed' | 'bottom-lined'>;
     size?: ResponsiveValue<'small' | 'medium'>;
     inverted?: boolean;

src/components/Input/docs/Input.mdx

@@ -27,6 +27,7 @@ Additionally, all native HTML input element props are supported and forwarded to
 
 <Playground>
     <ControlledInput variant="boxed" placeholder="[email protected]" label="E-Mail Address" id='email' />
+    <Input label='Uncontrolled input' />
 </Playground>
 
 ## Testing