2

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);
    };
  }
}
3

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.

  • You are the man. Yeah "Onchanged" is working. Will go with that. Thanks a lot. – Ravi Khambhati Nov 3 '18 at 17:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.