diff --git a/src/form/Input/InlineInput/InlineInput.story.tsx b/src/form/Input/InlineInput/InlineInput.story.tsx index 14975c4e..8aee1246 100644 --- a/src/form/Input/InlineInput/InlineInput.story.tsx +++ b/src/form/Input/InlineInput/InlineInput.story.tsx @@ -9,17 +9,11 @@ export default { export const Basic = () => { const [text, setText] = useState(''); return ( -
+
setText(event.target.value)} - placeholder="Type here..." + placeholder="..." />
); diff --git a/src/form/Input/InlineInput/InlineInput.tsx b/src/form/Input/InlineInput/InlineInput.tsx index b6a70335..927a8444 100644 --- a/src/form/Input/InlineInput/InlineInput.tsx +++ b/src/form/Input/InlineInput/InlineInput.tsx @@ -2,7 +2,7 @@ import React, { forwardRef, Ref, InputHTMLAttributes } from 'react'; import AutosizeInput from 'react-18-input-autosize'; import { twMerge } from 'tailwind-merge'; import { InputTheme } from '@/form/Input/InputTheme'; -import { useComponentTheme } from '@/utils'; +import { cn, useComponentTheme } from '@/utils'; export interface InlineInputProps extends InputHTMLAttributes { @@ -42,13 +42,43 @@ export const InlineInput = forwardRef( { inputClassName, placeholderIsMinWidth = true, + className, + placeholder, + value, theme: customTheme, - ...rest + ...props }, ref: Ref ) => { const theme: InputTheme = useComponentTheme('input', customTheme); + return ( +
+ + {!value && '\u00A0'} + {typeof value === 'string' + ? !value + ? placeholder.replace(/ /g, '\u00A0') + : value.replace(/ /g, '\u00A0') + : value} + + +
+ ); + /* return ( ( {...rest} /> ); + */ } ); diff --git a/src/form/Select/SelectInput/SelectInput.tsx b/src/form/Select/SelectInput/SelectInput.tsx index 52b88558..e334ec5a 100644 --- a/src/form/Select/SelectInput/SelectInput.tsx +++ b/src/form/Select/SelectInput/SelectInput.tsx @@ -51,11 +51,6 @@ export interface SelectInputProps { */ menuOpen?: boolean; - /** - * The font size of the select input. - */ - fontSize?: string | number; - /** * The input text of the select input. */ @@ -231,7 +226,6 @@ export const SelectInput: FC> = ({ disabled, placeholder, filterable, - fontSize = 13, id, name, className, @@ -505,9 +499,8 @@ export const SelectInput: FC> = ({ > {renderPrefix()} (inputRef.current = el)} + ref={inputRef} id={id} - style={{ fontSize }} name={name} disabled={disabled} required={required}