Question

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);
    };
  }
}
Was it helpful?

Solution

I do observe the same here. Interestingly, the deprecated onChanged event fires and not onChange.

Works if extending a basecomponent and something is missing while extending React.Component. In the end, there's no error.

Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top