@tipp/ui 1.6.28 → 1.6.30

package/src/atoms/auto-sizing-input.tsx

@@ -28,6 +28,8 @@ export const AutoSizingInput = forwardRef<
     const [value, setValue] = useState(_value);
     const [width, setWidth] = useState(0);
     const span = useRef<HTMLSpanElement>(null);
+    const defaultRef = useRef<HTMLInputElement>(null);
+    const inputRef = ref || defaultRef;
 
     useEffect(() => {
       span.current && setWidth(span.current.offsetWidth);
@@ -51,12 +53,39 @@ export const AutoSizingInput = forwardRef<
       onChangeValue?.(value || '');
     }, [value, onChangeValue]);
 
+    const onClick = useCallback(() => {
+      if ('current' in inputRef) {
+        inputRef.current?.focus();
+      }
+    }, [inputRef]);
+
+    const onKeyDown = useCallback<React.KeyboardEventHandler<HTMLDivElement>>(
+      (evt) => {
+        if (evt.key === 'Enter') {
+          onClick();
+        }
+      },
+      [onClick]
+    );
+
     return (
-      <div className="auto-sizing-input wrapper" style={{ width: width + 24 }}>
-        <input onChange={changeHandler} ref={ref} value={value} {...rest} />
-        <span aria-hidden="true" ref={span}>
-          {value}
+      <div
+        className="auto-sizing-input wrapper"
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+        role="button"
+        style={{ width: `${width + 24}px` }}
+        tabIndex={0}
+      >
+        <span aria-hidden="true" ref={span} style={rest.style}>
+          {value || rest.placeholder || ''}
         </span>
+        <input
+          onChange={changeHandler}
+          ref={inputRef}
+          value={value}
+          {...rest}
+        />
       </div>
     );
   }