Fixed bug related with Select

reaviz · Apr 30, 2024 · c3c27c7 · c3c27c7
1 parent 70d5d70
commit c3c27c7
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 12 deletions.
diff --git a/src/form/Input/InlineInput/InlineInput.tsx b/src/form/Input/InlineInput/InlineInput.tsx
@@ -1,7 +1,14 @@
-import { FC, forwardRef, Ref, InputHTMLAttributes, useState } from 'react';
+import {
+  FC,
+  forwardRef,
+  RefObject,
+  InputHTMLAttributes,
+  useState
+} from 'react';
 import { twMerge } from 'tailwind-merge';
 import { InputTheme } from '../InputTheme';
 import { useComponentTheme } from '../../../utils';
+import { InputRef } from '../Input';
 
 export interface InlineInputProps
   extends InputHTMLAttributes<HTMLInputElement> {
@@ -47,35 +54,48 @@ export const InlineInput: FC<InlineInputProps> = forwardRef(
       className,
       inputClassName,
       placeholder,
-      placeholderIsMinWidth = true,
+      placeholderIsMinWidth,
       theme: customTheme,
       extraWidth,
       onChange,
       ...rest
     },
-    ref: Ref<HTMLInputElement>
+    ref: RefObject<InputRef>
   ) => {
     const theme: InputTheme = useComponentTheme('input', customTheme);
-    const [inputValue, setInputValue] = useState('');
     const spanStyles = 'relative opacity-0 whitespace-pre select-none';
+    const [inputValue, setInputValue] = useState('');
+    const [placeholderValue, setPlaceholderValue] = useState(placeholder);
+
+    const onInputValueChange = event => {
+      setInputValue(event.target.value);
+      onChange(event);
+    };
+
+    const setRef = (node: HTMLInputElement) => {
+      ref?.current?.inputRef;
+
+      const placeholder = node?.placeholder;
+      const value = node?.value;
+
+      placeholder && setPlaceholderValue(placeholder);
+      value && setInputValue(value);
+    };
 
     return (
       <div className={twMerge(className, theme.inline.base)}>
         <span className={spanStyles} style={{ paddingRight: extraWidth ?? 0 }}>
           {inputValue}
         </span>
-        {placeholderIsMinWidth && !inputValue && (
+        {!placeholderIsMinWidth === true && !inputValue && (
           <span className={spanStyles}>{placeholder}</span>
         )}
         <input
           value={inputValue}
-          placeholder={placeholder}
+          placeholder={placeholderValue}
           className={twMerge(theme.inline.input, inputClassName)}
-          ref={ref}
-          onChange={e => {
-            setInputValue(e.target.value);
-            onChange(e);
-          }}
+          ref={setRef}
+          onChange={onInputValueChange}
           {...rest}
         />
       </div>

diff --git a/src/form/Select/SelectInput/SelectInput.tsx b/src/form/Select/SelectInput/SelectInput.tsx
@@ -4,6 +4,7 @@ import React, {
   Ref,
   RefObject,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useRef
@@ -499,7 +500,7 @@ export const SelectInput: FC<Partial<SelectInputProps>> = ({
       >
         {renderPrefix()}
         <InlineInput
-          inputRef={el => (inputRef.current = el)}
+          ref={el => (inputRef.current = el)}
           id={id}
           style={{ fontSize }}
           name={name}