Bugfix: SelectBox focus case added.

src/components/selectBox/index.tsx

@@ -131,36 +131,6 @@ function SelectBox<T>({
         type
     });
 
-    const {
-        contentContainer: contentContainerDynamicStyle,
-        titleContainer: titleContainerDynamicStyle,
-        hintTextIcon: hintTextIconDynamicStyle,
-        contentText: contentTextDynamicStyle,
-        cleanButton: cleanButtonDynamicStyle,
-        rightIcon: rightIconDynamicStyle,
-        container: containerDynamicStyle,
-        hintText: hintTextDynamicStyle,
-        required: requiredDynamicStyle,
-        subTitle: subTitleDynamicStyle,
-        overlay: overlayDynamicStyle,
-        content: contentDynamicStyle,
-        title: titleDynamicStyle,
-        icon: iconDynamicStyle
-    } = useStyles({
-        icon: IconComponentProp ? true : false,
-        spreadBehaviour,
-        inlineSpaces,
-        isSearchable,
-        currentType,
-        isDisabled,
-        radiuses,
-        borders,
-        spaces,
-        colors,
-        title,
-        type
-    });
-
     const styleType = type === "default" ? "neutral" : type === "question" ? "neutral" : type === "danger" ? "error" : type;
 
     const [
@@ -205,6 +175,37 @@ function SelectBox<T>({
 
     const mainSelectedItems = isWorkWithRealtime ? selectedItems : tempSelectedItems;
 
+    const {
+        contentContainer: contentContainerDynamicStyle,
+        titleContainer: titleContainerDynamicStyle,
+        hintTextIcon: hintTextIconDynamicStyle,
+        contentText: contentTextDynamicStyle,
+        cleanButton: cleanButtonDynamicStyle,
+        rightIcon: rightIconDynamicStyle,
+        container: containerDynamicStyle,
+        hintText: hintTextDynamicStyle,
+        required: requiredDynamicStyle,
+        subTitle: subTitleDynamicStyle,
+        overlay: overlayDynamicStyle,
+        content: contentDynamicStyle,
+        title: titleDynamicStyle,
+        icon: iconDynamicStyle
+    } = useStyles({
+        icon: IconComponentProp ? true : false,
+        spreadBehaviour,
+        inlineSpaces,
+        isSearchable,
+        currentType,
+        isDisabled,
+        isActive,
+        radiuses,
+        borders,
+        spaces,
+        colors,
+        title,
+        type
+    });
+
     useImperativeHandle(
         ref,
         () => ({

src/components/selectBox/stylesheet.ts

@@ -165,6 +165,7 @@ export const useStyles = ({
     currentType,
     isDisabled,
     radiuses,
+    isActive,
     borders,
     colors,
     spaces,
@@ -240,6 +241,10 @@ export const useStyles = ({
         styles.container.width = "100%";
     }
 
+    if(isActive) {
+        styles.contentContainer.borderColor = colors.content.border.emphasized;
+    }
+
     return styles;
 };
 export default stylesheet;

src/components/selectBox/type.ts

@@ -36,6 +36,7 @@ export type SelectBoxDynamicStyleType = {
     isSearchable?: boolean;
     isDisabled?: boolean;
     type: SelectBoxType;
+    isActive: boolean;
     title?: string;
     icon?: boolean;
 };