I am creating SPFx component with React framework. For UI I am using Office UI Fabric controls.
During my development I have found that "Dropdown" control's onChange event is not firing
Based on documentation on "https://developer.microsoft.com/en-us/fabric#/components/dropdown" site, I created below react component with a dropdown. When I look at browser console only two events are firing "onFocus called" and "onBlur called". Also, I do not see any error.
I am using SPFx version 1.5.1
import * as React from "react";
import styles from "./HelloWorld.module.scss";
import { IHelloWorldProps } from "./IHelloWorldProps";
import { escape } from "@microsoft/sp-lodash-subset";
import {
Dropdown,
IDropdown,
DropdownMenuItemType,
IDropdownOption
} from "office-ui-fabric-react/lib/Dropdown";
export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
public render(): React.ReactElement<IHelloWorldProps> {
return (
<Dropdown
label="Controlled example:"
onSelect={this._log("onSelect called")}
onChange={this._log("onChange called")}
onFocus={this._log("onFocus called")}
onBlur={this._log("onBlur called")}
placeHolder="Select an Option"
options={[
{ key: "A", text: "Option a" },
{ key: "B", text: "Option b" },
{ key: "C", text: "Option c" },
{ key: "D", text: "Option d" },
{
key: "divider_1",
text: "-",
itemType: DropdownMenuItemType.Divider
},
{ key: "E", text: "Option e" },
{ key: "F", text: "Option f" },
{ key: "G", text: "Option g" }
]}
/>
);
}
private _log(str: string): () => void {
return (): void => {
console.log(str);
};
}
}