fixed the Select component when allowClear is enabled

pimcore · Dec 3, 2024 · f2f221d · f2f221d
1 parent afa66e6
commit f2f221d
Show file tree

Hide file tree

Showing 4 changed files with 1,914 additions and 2 deletions.
diff --git a/assets/js/src/core/components/select/select.styles.ts b/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'};
       

diff --git a/assets/js/src/core/components/select/select.tsx b/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 }

diff --git a/public/build/b78fb8ab-874d-4fff-a928-4ae4370624c3/entrypoints.json b/public/build/b78fb8ab-874d-4fff-a928-4ae4370624c3/entrypoints.json
@@ -0,0 +1,14 @@
+{
+  "entrypoints": {
+    "main": {
+      "css": [
+        "http://localhost:3030/build/b78fb8ab-874d-4fff-a928-4ae4370624c3/vendors-node_modules_dnd-kit_modifiers_dist_modifiers_esm_js-node_modules_dnd-kit_sortable_di-41eabe.css",
+        "http://localhost:3030/build/b78fb8ab-874d-4fff-a928-4ae4370624c3/main.css"
+      ],
+      "js": [
+        "http://localhost:3030/build/b78fb8ab-874d-4fff-a928-4ae4370624c3/vendors-node_modules_dnd-kit_modifiers_dist_modifiers_esm_js-node_modules_dnd-kit_sortable_di-41eabe.js",
+        "http://localhost:3030/build/b78fb8ab-874d-4fff-a928-4ae4370624c3/main.js"
+      ]
+    }
+  }
+}