next-helios-fe 1.4.32 → 1.4.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.4.32",
+  "version": "1.4.34",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/form/other/autocomplete.tsx

@@ -26,6 +26,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
   ...rest
 }) => {
   const [tempValue, setTempValue] = useState("");
+  const [tempFilter, setTempFilter] = useState("");
   const [openDropdown, setOpenDropdown] = useState(false);
   const [position, setPosition] = useState<{
     top: number;
@@ -127,18 +128,16 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
             type="text"
             className={`w-full px-4 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 ${height}`}
             placeholder={placeholder}
+            required={rest.required}
             disabled={rest.disabled}
-            value={
-              menus.find((item) => item.value === tempValue)
-                ? menus.find((item) => item.value === tempValue)?.label
-                : tempValue
-            }
+            value={tempFilter}
             onChange={(e) => {
-              setTempValue(e.target.value);
+              setTempFilter(e.target.value);
             }}
             onClick={() => {
               setOpenDropdown(true);
               setTempValue("");
+              setTempFilter("");
             }}
           />
           <div className="absolute right-4 text-xl text-slate-400 pointer-events-none">
@@ -158,7 +157,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
               }}
             >
               {menus.filter((item) =>
-                item.label.toLowerCase().includes(tempValue.toLowerCase())
+                item.label.toLowerCase().includes(tempFilter.toLowerCase())
               ).length === 0 ? (
                 <div className="flex justify-center">
                   <span className="px-4 py-1">No data found</span>
@@ -166,7 +165,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
               ) : (
                 menus
                   .filter((item) =>
-                    item.label.toLowerCase().includes(tempValue.toLowerCase())
+                    item.label.toLowerCase().includes(tempFilter.toLowerCase())
                   )
                   .map((item, index) => (
                     <button
@@ -176,6 +175,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
                       disabled={tempValue === item.value}
                       onMouseDown={() => {
                         setTempValue(item.value);
+                        setTempFilter(item.label);
                         setOpenDropdown(false);
                       }}
                     >

package/src/components/form/other/select.tsx

@@ -89,10 +89,10 @@ export const Select: React.FC<SelectProps> = ({
   }, [openDropdown]);
 
   useEffect(() => {
-    if (rest.value) {
+    if (rest.value || rest.value === "") {
       setTempValue(rest.value as string);
       return;
-    } else if (rest.defaultValue) {
+    } else if (rest.defaultValue || rest.defaultValue === "") {
       setTempValue(rest.defaultValue as string);
       return;
     }
@@ -127,8 +127,13 @@ export const Select: React.FC<SelectProps> = ({
             type="text"
             className={`w-full px-4 border-default border rounded-md bg-secondary-bg cursor-pointer caret-transparent placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400 disabled:cursor-default ${height}`}
             placeholder={placeholder}
+            required={rest.required}
             disabled={rest.disabled}
-            value={menus.find((item) => item.value === tempValue)?.label}
+            value={
+              tempValue
+                ? menus.find((item) => item.value === tempValue)?.label
+                : ""
+            }
             onClick={() => setOpenDropdown(true)}
           />
           <div className="absolute right-4 text-xl text-slate-400 pointer-events-none">