From 0f9e747593fa2f91511cc11c62b0facacfb23429 Mon Sep 17 00:00:00 2001
From: Simon Bracegirdle <sbracegirdle@gmail.com>
Date: Tue, 25 Jun 2024 16:46:52 +0800
Subject: [PATCH] Fix; bug fixes in Box, Dropdown, TextArea. Mostly missing
 props and support.

---
 src/components/Box/Box.tsx                 | 1 +
 src/components/Dropdown/Dropdown.tsx       | 4 +++-
 src/components/TextArea/TextArea.styles.ts | 4 +++-
 src/components/TextArea/TextArea.tsx       | 8 ++++++++
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/Box/Box.tsx b/src/components/Box/Box.tsx
index 832edf1..aae4847 100644
--- a/src/components/Box/Box.tsx
+++ b/src/components/Box/Box.tsx
@@ -97,6 +97,7 @@ export function separateProps(props: ExtendedBoxProps): {
           "className",
           "target",
           "rel",
+          "for",
         ].includes(key)
       ) {
         acc.filteredProps[key] = (props as any)[key];
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 533e6a7..baaf646 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -78,6 +78,7 @@ const Dropdown = ({
   loadingIndicator,
   selectedIndicator,
   cs,
+  ...rest
 }: DropdownProps) => {
   const popRef = useRef<any>(null);
   const [showPopover, setShowPopover] = useState(false);
@@ -120,7 +121,7 @@ const Dropdown = ({
           data-cy={dataCy}
           error={error}
           onChange={onInputChange}
-          onClick={() => {
+          onFocus={() => {
             setShowPopover(true);
           }}
           endAdornment={
@@ -172,6 +173,7 @@ const Dropdown = ({
               : options?.find((item: any) => item?.id === defaultValue)?.text || ""
           }
           readOnly={typeof inputValue !== "string"}
+          {...rest}
         />
         {showPopover ? (
           <Popover
diff --git a/src/components/TextArea/TextArea.styles.ts b/src/components/TextArea/TextArea.styles.ts
index cf56701..09b4f8a 100644
--- a/src/components/TextArea/TextArea.styles.ts
+++ b/src/components/TextArea/TextArea.styles.ts
@@ -9,6 +9,7 @@ const StyledAdornment = styled.span<{
   squashHeight?: boolean;
   adornmentColor?: string;
   overridePositionTop?: string;
+  allowPointerEvents?: boolean;
 }>(
   ({
     theme,
@@ -18,6 +19,7 @@ const StyledAdornment = styled.span<{
     squashHeight,
     adornmentColor,
     overridePositionTop,
+    allowPointerEvents,
   }) => ({
     [position]: noPadding ? theme.spacing.xs : theme.spacing.sm,
     paddingTop: overridePositionTop
@@ -26,7 +28,7 @@ const StyledAdornment = styled.span<{
       ? "0px"
       : theme.spacing.xs,
     position: "absolute",
-    pointerEvents: squashHeight ? "auto" : "none",
+    pointerEvents: allowPointerEvents || squashHeight ? "auto" : "none",
     opacity: adornmentColor ? 1 : disabled ? 0.3 : 1,
     color: adornmentColor ? getValueFromPath(theme, adornmentColor) : "inherit",
   })
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
index 4bd6cff..42cd3ef 100644
--- a/src/components/TextArea/TextArea.tsx
+++ b/src/components/TextArea/TextArea.tsx
@@ -59,6 +59,11 @@ export interface TextAreaProps
    * overrides the padding
    */
   overridePadding?: keyof Spacing;
+
+  /**
+   * allows pointer events on adornment
+   */
+  allowAdornmentPointerEvents?: boolean;
 }
 
 /**
@@ -79,6 +84,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, re
     noPadding,
     adornmentColor,
     overridePadding,
+    allowAdornmentPointerEvents,
     ...rest
   } = props;
 
@@ -124,6 +130,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, re
             overridePositionTop={overridePositionTop}
             disabled={props.disabled || false}
             position="left"
+            allowPointerEvents={allowAdornmentPointerEvents}
           >
             {props.startAdornment}
           </StyledAdornment>
@@ -152,6 +159,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, re
             overridePositionTop={overridePositionTop}
             disabled={props.disabled || false}
             position="right"
+            allowPointerEvents={allowAdornmentPointerEvents}
           >
             {props.endAdornment}
           </StyledAdornment>