COM-156: Prevent overlapping of clear-button with select-arrow (#1363)

Since the end-adornment for the clear-button needs absolute positioning, it is no longer possible to use the `clearable` prop in combination with an `endAdornment`. However, this is not a common use-case, and an `endAdornment` on a select is generally not supported by MUI, see: mui/material-ui#17799. An alternative would have been to position the select-arrow relative. Unfortunately, this would cause the clickable element that opens the select to shrink and prevent opening the select by clicking the select-arrow. Since this would confuse users, the `endAdornment` is now also positioned absolutely. | Previously | Now | | ---------- | --- | | <img width="400" alt="Previously" src="https://github.com/vivid-planet/comet/assets/6264317/886ac1f4-c1c5-49c2-b8ac-0ab74bfa6bf3"> | <img width="400" alt="Now" src="https://github.com/vivid-planet/comet/assets/6264317/c89be77b-3dea-4c72-a84a-2f6ce6890c88"> | --------- Co-authored-by: Thomas Dax <thomas.dax@vivid-planet.com> Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
vivid-planet · Nov 14, 2023 · fe310df · fe310df
1 parent 17f977a
commit fe310df
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 6 deletions.
diff --git a/.changeset/slow-queens-unite.md b/.changeset/slow-queens-unite.md
@@ -0,0 +1,6 @@
+---
+"@comet/admin-theme": patch
+"@comet/admin": patch
+---
+
+Prevent the clear-button and the select-arrow from overlapping when using `FinalFormSelect` with the `clearable` prop.
diff --git a/packages/admin/admin-stories/src/admin/form/Select.tsx b/packages/admin/admin-stories/src/admin/form/Select.tsx
@@ -1,5 +1,6 @@
 import { Field, FinalFormSelect } from "@comet/admin";
-import { Card, CardContent, MenuItem } from "@mui/material";
+import { Account } from "@comet/admin-icons";
+import { Card, CardContent, InputAdornment, MenuItem } from "@mui/material";
 import { storiesOf } from "@storybook/react";
 import * as React from "react";
 import { Form } from "react-final-form";
@@ -60,6 +61,18 @@ function Story() {
                                         )}
                                     </Field>
 
+                                    <Field name="flavorClearable" label="Clearable Flavor" fullWidth>
+                                        {(props) => (
+                                            <FinalFormSelect {...props} fullWidth clearable>
+                                                {options.map((option: Option) => (
+                                                    <MenuItem value={option.value} key={option.value}>
+                                                        {option.label}
+                                                    </MenuItem>
+                                                ))}
+                                            </FinalFormSelect>
+                                        )}
+                                    </Field>
+
                                     <Field name="flavorRequired" label="Required Flavor" fullWidth>
                                         {(props) => (
                                             <FinalFormSelect {...props} fullWidth required>
@@ -84,6 +97,31 @@ function Story() {
                                         )}
                                     </Field>
 
+                                    <Field name="flavorMultipleAdornments" label="Flavor with adornments" fullWidth>
+                                        {(props) => (
+                                            <FinalFormSelect
+                                                {...props}
+                                                fullWidth
+                                                startAdornment={
+                                                    <InputAdornment position="start">
+                                                        <Account />
+                                                    </InputAdornment>
+                                                }
+                                                endAdornment={
+                                                    <InputAdornment position="end" disablePointerEvents sx={{ width: 24 }}>
+                                                        <Account />
+                                                    </InputAdornment>
+                                                }
+                                            >
+                                                {options.map((option: Option) => (
+                                                    <MenuItem value={option.value} key={option.value}>
+                                                        {option.label}
+                                                    </MenuItem>
+                                                ))}
+                                            </FinalFormSelect>
+                                        )}
+                                    </Field>
+
                                     <Field name="multipleFlavours" label="Multiple Flavours" fullWidth>
                                         {(props) => (
                                             <FinalFormSelect {...props} fullWidth multiple>

diff --git a/packages/admin/admin-theme/src/componentsTheme/getCommonSelectTheme.tsx b/packages/admin/admin-theme/src/componentsTheme/getCommonSelectTheme.tsx
@@ -1,5 +1,5 @@
 import { ChevronDown } from "@comet/admin-icons";
-import { Palette } from "@mui/material";
+import { inputAdornmentClasses, inputBaseClasses, Palette } from "@mui/material";
 
 export const commonSelectDefaultProps = {
     IconComponent: ChevronDown,
@@ -12,6 +12,17 @@ export const commonSelectStyleOverrides = {
     "&:focus": {
         backgroundColor: "transparent",
     },
+
+    [`&.${inputBaseClasses.inputAdornedEnd}`]: {
+        paddingRight: 42,
+    },
+
+    [`& ~ .${inputAdornmentClasses.positionEnd}`]: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        right: 26,
+    },
 };
 
 export const getCommonIconStyleOverrides = (palette: Palette) => ({

diff --git a/packages/admin/admin/src/form/FinalFormSelect.tsx b/packages/admin/admin/src/form/FinalFormSelect.tsx
@@ -35,10 +35,7 @@ export const FinalFormSelect = <T,>({
     ...rest
 }: FinalFormSelectProps<T> & Partial<AsyncOptionsProps<T>> & Omit<SelectProps, "input">) => {
     const selectEndAdornment = clearable ? (
-        <>
-            <ClearInputAdornment position="end" hasClearableContent={Boolean(value)} onClick={() => onChange(undefined)} />
-            {endAdornment}
-        </>
+        <ClearInputAdornment position="end" hasClearableContent={Boolean(value)} onClick={() => onChange(undefined)} />
     ) : (
         endAdornment
     );