Updated InlineInput

src/form/Input/InlineInput/InlineInput.tsx

@@ -1,4 +1,4 @@
-import { FC, forwardRef, Ref, InputHTMLAttributes } from 'react';
+import { FC, forwardRef, Ref, InputHTMLAttributes, useState } from 'react';
 import AutosizeInput from 'react-18-input-autosize';
 import { twMerge } from 'tailwind-merge';
 import { InputTheme } from '../InputTheme';
@@ -21,6 +21,16 @@ export interface InlineInputProps
    */
   inputClassName?: string;
 
+  /**
+   * onChange handler
+   */
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+
+  /**
+   * Placeholder content
+   */
+  placeholder?: string;
+
   /**
    * Don't collapse size to less than the placeholder
    */
@@ -40,22 +50,45 @@ export interface InlineInputProps
 export const InlineInput: FC<InlineInputProps> = forwardRef(
   (
     {
+      className,
       inputClassName,
+      placeholder = 'Type here...',
       placeholderIsMinWidth = true,
       theme: customTheme,
+      extraWidth,
+      onChange,
       ...rest
     },
     ref: Ref<HTMLInputElement>
   ) => {
     const theme: InputTheme = useComponentTheme('input', customTheme);
+    const [inputValue, setInputValue] = useState('');
+    const spanStyles =
+      'relative opacity-0 font-[inherit] text-[inherit] leading-none whitespace-pre select-none';
 
     return (
-      <AutosizeInput
-        inputRef={ref}
-        inputClassName={twMerge(theme.inline, inputClassName)}
-        placeholderIsMinWidth={placeholderIsMinWidth}
-        {...rest}
-      />
+      <div className={twMerge(className, theme.inline.base)}>
+        <span
+          className={spanStyles}
+          style={{ paddingRight: extraWidth ? extraWidth + 'px' : 0 }}
+        >
+          {inputValue}
+        </span>
+        {placeholderIsMinWidth && !inputValue && (
+          <span className={spanStyles}>{placeholder}</span>
+        )}
+        <input
+          value={inputValue}
+          placeholder={placeholder}
+          className={twMerge(theme.inline.input, inputClassName)}
+          ref={ref}
+          onChange={e => {
+            setInputValue(e.target.value);
+            onChange(e);
+          }}
+          {...rest}
+        />
+      </div>
     );
   }
 );

src/form/Input/InputTheme.ts

@@ -1,7 +1,10 @@
 export interface InputTheme {
   base: string;
   input: string;
-  inline: string;
+  inline: {
+    base: string;
+    input: string;
+  };
   disabled: string;
   focused: string;
   fullWidth: string;
@@ -23,7 +26,11 @@ const baseTheme: InputTheme = {
   focused: '',
   input:
     'flex-1 font-normal font-sans bg-transparent border-0 p-0 m-0 disabled:pointer-events-none outline-none px-0.5 disabled:cursor-not-allowed disabled:text-disabled',
-  inline: 'bg-transparent border-0 outline-none',
+  inline: {
+    base: 'min-w-[76px] relative',
+    input:
+      'w-full h-full absolute top-0 left-0 font-[inherit] text-[inherit] leading-[inherit] bg-transparent border-0 outline-none'
+  },
   disabled: '',
   fullWidth: 'w-full',
   error: 'border-error',