fix(dropdown-web): fix events not working

Author: rahmanunver

packages/pluggableWidgets/dropdown-web/src/components/Dropdown.tsx

@@ -1,19 +1,21 @@
 import classNames from "classnames";
 import Downshift from "downshift";
 import { createElement, ReactElement, useRef } from "react";
+import { useActionEvents } from "src/hooks/useActionEvents";
+import { DropdownContainerProps } from "../../typings/DropdownProps";
 import { ClearButton, DownArrow } from "../assets/icons";
 import { useDownshiftProps } from "../hooks/useDownshiftProps";
 import { useGetSelector } from "../hooks/useGetSelector";
-import { DropdownContainerProps } from "../../typings/DropdownProps";
 import { DropdownMenu } from "./DropdownMenu";
 import { Placeholder } from "./Placeholder";
 
 export function Dropdown(props: DropdownContainerProps): ReactElement {
     const inputRef = useRef<HTMLInputElement>(null);
     const dropdownRef = useRef<HTMLInputElement>(null);
     const selector = useGetSelector(props);
+    const downshiftProps = useDownshiftProps(selector, inputRef.current);
+    const actionEvents = useActionEvents(props);
     const readOnly = props.attributeEnumerationOrBoolean?.readOnly ?? props.attributeAssociation?.readOnly;
-    const downshiftProps = useDownshiftProps(selector, inputRef.current, props);
 
     if (selector.status === "unavailable") {
         return <Placeholder />;
@@ -31,7 +33,7 @@ export function Dropdown(props: DropdownContainerProps): ReactElement {
                 highlightedIndex,
                 getToggleButtonProps
             }): JSX.Element => (
-                <div className="widget-dropdown">
+                <div className="widget-dropdown" {...actionEvents}>
                     <div
                         tabIndex={0}
                         ref={dropdownRef}

packages/pluggableWidgets/dropdown-web/src/hooks/useActionEvents.ts

@@ -0,0 +1,13 @@
+import { executeAction } from "@mendix/pluggable-widgets-commons";
+import { useMemo } from "react";
+import { DropdownContainerProps } from "typings/DropdownProps";
+
+export function useActionEvents(props: DropdownContainerProps) {
+    return useMemo(() => {
+        return {
+            onClick: (): void => executeAction(props.onClickEvent),
+            onMouseEnter: (): void => executeAction(props.onEnterEvent),
+            onMouseLeave: (): void => executeAction(props.onLeaveEvent)
+        };
+    }, [props.onClickEvent, props.onEnterEvent, props.onLeaveEvent]);
+}

packages/pluggableWidgets/dropdown-web/src/hooks/useDownshiftProps.ts

@@ -1,21 +1,12 @@
-import { useMemo } from "react";
 import Downshift, { DownshiftState, StateChangeOptions } from "downshift";
+import { useMemo } from "react";
 import { SingleSelector } from "../helpers/types";
-import { DropdownContainerProps } from "typings/DropdownProps";
-import { executeAction } from "@mendix/pluggable-widgets-commons";
 
-export function useDownshiftProps(
-    selector: SingleSelector,
-    inputElement: HTMLInputElement | null,
-    props: DropdownContainerProps
-) {
+export function useDownshiftProps(selector: SingleSelector, inputElement: HTMLInputElement | null) {
     return useMemo(() => {
         return {
             itemToString: (v: string | null) => selector.caption.get(v),
             onChange: (v: string | null) => selector.setValue(v),
-            onClick: (): void => executeAction(props.onClickEvent),
-            onMouseEnter: (): void => executeAction(props.onEnterEvent),
-            onMouseLeave: (): void => executeAction(props.onLeaveEvent),
             onInputValueChange: (v: string) => selector.options.setSearchTerm(v),
             onStateChange: (state: StateChangeOptions<string>) => {
                 if (state.type === Downshift.stateChangeTypes.clickButton && state.isOpen) {
@@ -40,5 +31,5 @@ export function useDownshiftProps(
                 }
             }
         };
-    }, [selector, inputElement, props.onClickEvent, props.onEnterEvent, props.onLeaveEvent]);
+    }, [selector, inputElement]);
 }