Fix the Select component when allowClear is enabled

assets/js/src/core/components/select/select.styles.ts

@@ -94,6 +94,14 @@ export const useStyles = createStyles(({ css, token }, props: StylesProps) => {
       }
     `,
 
+    selectContainerWithClear: css`
+      &:hover {
+        .ant-select-arrow {
+          display: none;
+        }
+      }
+    `,
+
     select: css`
       width: ${!isEmptyValue(props.width) ? `${props.width}px` : 'initial'};
       

assets/js/src/core/components/select/select.tsx

@@ -25,11 +25,12 @@ export interface SelectProps extends AntdSelectProps {
   width?: number
 }
 
-export const Select = forwardRef<RefSelectProps, SelectProps>(({ customIcon, customArrowIcon, mode, status, className, width, ...antdSelectProps }, ref): React.JSX.Element => {
+export const Select = forwardRef<RefSelectProps, SelectProps>(({ customIcon, customArrowIcon, mode, status, className, width, allowClear, ...antdSelectProps }, ref): React.JSX.Element => {
   const selectRef = useRef<RefSelectProps>(null)
 
   const [isActive, setIsActive] = useState(false)
   const [isFocus, setIsFocus] = useState(false)
+  const [isSelected, setIsSelected] = useState(false)
 
   useImperativeHandle(ref, () => selectRef.current!)
 
@@ -41,7 +42,8 @@ export const Select = forwardRef<RefSelectProps, SelectProps>(({ customIcon, cus
 
   const selectContainerClassNames = cn(styles.selectContainer, {
     [styles.selectContainerWarning]: isStatusWarning,
-    [styles.selectContainerError]: isStatusError
+    [styles.selectContainerError]: isStatusError,
+    [styles.selectContainerWithClear]: allowClear === true && isSelected
   })
   const selectClassNames = cn(className, styles.select, {
     [styles.selectWithCustomIcon]: withCustomIcon
@@ -54,6 +56,10 @@ export const Select = forwardRef<RefSelectProps, SelectProps>(({ customIcon, cus
 
   const handleClick = (): void => { setIsActive(!isActive) }
 
+  const handleChange = (value: string): void => {
+    !isEmpty(value) ? setIsSelected(true) : setIsSelected(false)
+  }
+
   const getSuffixIcon = (): React.JSX.Element => {
     const isShowCustomIcon = !isEmpty(customArrowIcon) && isString(customArrowIcon)
     const iconToShow = isShowCustomIcon ? customArrowIcon : (isActive ? 'chevron-up' : 'chevron-down')
@@ -83,10 +89,12 @@ export const Select = forwardRef<RefSelectProps, SelectProps>(({ customIcon, cus
         />
       )}
       <AntdSelect
+        allowClear={ allowClear }
         className={ selectClassNames }
         menuItemSelectedIcon={ getItemSelectedIcon() }
         mode={ mode }
         onBlur={ () => { setIsFocus(false) } }
+        onChange={ handleChange }
         onDropdownVisibleChange={ handleClick }
         onFocus={ () => { setIsFocus(true) } }
         ref={ selectRef }

public/build/48593847-76fa-47e4-8014-93645730dcfc/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "main": {
+      "js": [
+        "/bundles/pimcorestudioui/build/48593847-76fa-47e4-8014-93645730dcfc/main.js"
+      ]
+    }
+  }
+}

public/build/48593847-76fa-47e4-8014-93645730dcfc/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/48593847-76fa-47e4-8014-93645730dcfc/main.js": "/bundles/pimcorestudioui/build/48593847-76fa-47e4-8014-93645730dcfc/main.js"
+}

public/build/5ef68380-44fe-45f5-b313-f9c1e78fa12f/entrypoints.json

@@ -0,0 +1,12 @@
+{
+  "entrypoints": {
+    "core-dll": {
+      "css": [
+        "/bundles/pimcorestudioui/build/5ef68380-44fe-45f5-b313-f9c1e78fa12f/core-dll.css"
+      ],
+      "js": [
+        "/bundles/pimcorestudioui/build/5ef68380-44fe-45f5-b313-f9c1e78fa12f/core-dll.js"
+      ]
+    }
+  }
+}

public/build/6c0cfd99-8b84-41cf-afdc-dd21bb54dfd4/entrypoints.json

@@ -0,0 +1,9 @@
+{
+  "entrypoints": {
+    "vendor": {
+      "js": [
+        "/bundles/pimcorestudioui/build/6c0cfd99-8b84-41cf-afdc-dd21bb54dfd4/vendor.js"
+      ]
+    }
+  }
+}

public/build/6c0cfd99-8b84-41cf-afdc-dd21bb54dfd4/manifest.json

@@ -0,0 +1,3 @@
+{
+  "bundles/pimcorestudioui/build/6c0cfd99-8b84-41cf-afdc-dd21bb54dfd4/vendor.js": "/bundles/pimcorestudioui/build/6c0cfd99-8b84-41cf-afdc-dd21bb54dfd4/vendor.js"
+}