Skip to content

Commit 3b85532

Browse files
committed
fix(dropdown-web): fix events not working
1 parent c6bbb0d commit 3b85532

File tree

3 files changed

+21
-15
lines changed

3 files changed

+21
-15
lines changed

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
import classNames from "classnames";
22
import Downshift from "downshift";
33
import { createElement, ReactElement, useRef } from "react";
4+
import { useActionEvents } from "src/hooks/useActionEvents";
5+
import { DropdownContainerProps } from "../../typings/DropdownProps";
46
import { ClearButton, DownArrow } from "../assets/icons";
57
import { useDownshiftProps } from "../hooks/useDownshiftProps";
68
import { useGetSelector } from "../hooks/useGetSelector";
7-
import { DropdownContainerProps } from "../../typings/DropdownProps";
89
import { DropdownMenu } from "./DropdownMenu";
910
import { Placeholder } from "./Placeholder";
1011

1112
export function Dropdown(props: DropdownContainerProps): ReactElement {
1213
const inputRef = useRef<HTMLInputElement>(null);
1314
const dropdownRef = useRef<HTMLInputElement>(null);
1415
const selector = useGetSelector(props);
16+
const downshiftProps = useDownshiftProps(selector, inputRef.current);
17+
const actionEvents = useActionEvents(props);
1518
const readOnly = props.attributeEnumerationOrBoolean?.readOnly ?? props.attributeAssociation?.readOnly;
16-
const downshiftProps = useDownshiftProps(selector, inputRef.current, props);
1719

1820
if (selector.status === "unavailable") {
1921
return <Placeholder />;
@@ -31,7 +33,7 @@ export function Dropdown(props: DropdownContainerProps): ReactElement {
3133
highlightedIndex,
3234
getToggleButtonProps
3335
}): JSX.Element => (
34-
<div className="widget-dropdown">
36+
<div className="widget-dropdown" {...actionEvents}>
3537
<div
3638
tabIndex={0}
3739
ref={dropdownRef}
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { executeAction } from "@mendix/pluggable-widgets-commons";
2+
import { useMemo } from "react";
3+
import { DropdownContainerProps } from "typings/DropdownProps";
4+
5+
export function useActionEvents(props: DropdownContainerProps) {
6+
return useMemo(() => {
7+
return {
8+
onClick: (): void => executeAction(props.onClickEvent),
9+
onMouseEnter: (): void => executeAction(props.onEnterEvent),
10+
onMouseLeave: (): void => executeAction(props.onLeaveEvent)
11+
};
12+
}, [props.onClickEvent, props.onEnterEvent, props.onLeaveEvent]);
13+
}

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

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,12 @@
1-
import { useMemo } from "react";
21
import Downshift, { DownshiftState, StateChangeOptions } from "downshift";
2+
import { useMemo } from "react";
33
import { SingleSelector } from "../helpers/types";
4-
import { DropdownContainerProps } from "typings/DropdownProps";
5-
import { executeAction } from "@mendix/pluggable-widgets-commons";
64

7-
export function useDownshiftProps(
8-
selector: SingleSelector,
9-
inputElement: HTMLInputElement | null,
10-
props: DropdownContainerProps
11-
) {
5+
export function useDownshiftProps(selector: SingleSelector, inputElement: HTMLInputElement | null) {
126
return useMemo(() => {
137
return {
148
itemToString: (v: string | null) => selector.caption.get(v),
159
onChange: (v: string | null) => selector.setValue(v),
16-
onClick: (): void => executeAction(props.onClickEvent),
17-
onMouseEnter: (): void => executeAction(props.onEnterEvent),
18-
onMouseLeave: (): void => executeAction(props.onLeaveEvent),
1910
onInputValueChange: (v: string) => selector.options.setSearchTerm(v),
2011
onStateChange: (state: StateChangeOptions<string>) => {
2112
if (state.type === Downshift.stateChangeTypes.clickButton && state.isOpen) {
@@ -40,5 +31,5 @@ export function useDownshiftProps(
4031
}
4132
}
4233
};
43-
}, [selector, inputElement, props.onClickEvent, props.onEnterEvent, props.onLeaveEvent]);
34+
}, [selector, inputElement]);
4435
}

0 commit comments

Comments
 (0)