Fix/bug-fixes-and-gaps

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govconnex/ui",
-  "version": "0.0.189",
+  "version": "0.0.192",
   "description": "GovConnex UI - React Component Library",
   "scripts": {
     "build:tokens": "./tokens-build.sh",
@@ -139,4 +139,4 @@
     "url": "https://github.com/GovConnex/UI/issues"
   },
   "homepage": "https://github.com/GovConnex/UI#readme"
-}
+}

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];

src/components/Dropdown/Dropdown.test.tsx

@@ -26,7 +26,7 @@ describe("Dropdown Component", () => {
     );
     const input = getByRole("textbox");
 
-    fireEvent.click(input);
+    fireEvent.focus(input);
 
     await waitFor(() => {
       expect(getByText("Option 1")).toBeInTheDocument();
@@ -41,7 +41,7 @@ describe("Dropdown Component", () => {
     );
     const input = getByRole("textbox");
 
-    fireEvent.click(input);
+    fireEvent.focus(input);
     const option1 = getByText("Option 1");
     fireEvent.click(option1);
 
@@ -54,7 +54,7 @@ describe("Dropdown Component", () => {
     );
     const input = getByRole("textbox");
 
-    fireEvent.click(input);
+    fireEvent.focus(input);
     const option1 = getByText("Option 1");
     fireEvent.click(option1);
 
@@ -66,7 +66,7 @@ describe("Dropdown Component", () => {
   it("renders search input when hasSearch is true", () => {
     const {getByRole} = render(<Dropdown label="Dropdown" options={options} hasSearch />);
     const input = getByRole("textbox");
-    fireEvent.click(input);
+    fireEvent.focus(input);
 
     const searchInput = getByRole("searchbox");
     expect(searchInput).toBeInTheDocument();
@@ -83,7 +83,7 @@ describe("Dropdown Component", () => {
       />
     );
     const input = getByRole("textbox");
-    fireEvent.click(input);
+    fireEvent.focus(input);
 
     const clearButton = getByText("Clear Selection");
     fireEvent.click(clearButton);
@@ -102,7 +102,7 @@ describe("Dropdown Component", () => {
       />
     );
     const input = getByRole("textbox");
-    fireEvent.click(input);
+    fireEvent.focus(input);
 
     const clearButton = getByText("Select All");
     fireEvent.click(clearButton);
@@ -120,7 +120,7 @@ describe("Dropdown Component", () => {
       />
     );
     const input = getByRole("textbox");
-    fireEvent.click(input);
+    fireEvent.focus(input);
 
     await waitFor(() => {
       expect(getByText("inline-loading")).toBeInTheDocument();

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

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",
   })

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>