Fluentui: Office UI Fabric Dropdown event onChange not working

[ravick4u]

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.

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

Environment Information

SPFx version 1.5.1

• __Package version(s)__: (fill this out)
• __Browser and OS versions__: (fill this out if relevant)

Please provide a reproduction of the bug in a codepen:

Actual behavior:

Expected behavior:

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)

Requested priority: (Blocking, High, Normal, Low)

Products/sites affected: (if applicable)

[JasonGore]

I copied your code into this CodePen and I do see onChange firing whenever a Dropdown item is selected. I will close this issue as no repro for now, but feel free to comment if you find any other issues. Thanks!

[kalyany1]

onChange event is not firing while extending react.component. It looks weird.

https://sharepoint.stackexchange.com/questions/252011/office-ui-fabric-dropdown-event-onchange-not-working/252048#252048

[mariantoader]

I copied your code into this CodePen and I do see onChange firing whenever a Dropdown item is selected. I will close this issue as no repro for now, but feel free to comment if you find any other issues. Thanks!

You did not copy the example, you are extending BaseComponent, not React.Component.

[JasonGore]

I changed the same CodePen to use React.Component and I still see onChange getting called in the console.

[madenorth]

I'm getting the same issue for the last two days in an SPFx WebPart

SPFx version 1.7.0

import * as React from 'react';
import { IProjectDashProps } from './IProjectDashProps';
import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';

export default class ProjectDash extends React.Component<IProjectDashProps, {}> {

  private _log(str: string): () => void {
    return (): void => {
      console.log(str);
    };
  }

  public render(): React.ReactElement<{IProjectDashProps}> {
    return (
      <div>
          <Dropdown
          label="View"
          options={[
            { key: 'A', text: 'All live projects' },
            { key: 'B', text: 'Proposal submitted' },
            { key: 'C', text: 'Project archive' }
          ]}
          onSelect={this._log("onSelect called")}
          onChange={this._log("onChange called")}
          onFocus={this._log("onFocus called")}
          onBlur={this._log("onBlur called")}
          />
      </div>
    );
  }
}

It exhibits the same behaviour as above; onBlur and onFocus are called but onChange is never fired.

This is both on a locally hosted workbench or the tenant hosted one.

The codepens work fine but not when it's actually in an SPFx webpart.

[KevinTCoughlin]

Hmm.. I believe SPFx recently rolled-out a new version. I have not had a chance to investigate, but perhaps we're speaking about a difference in OUFR versions if the problem does not occur here on master.

[madenorth]

onChanged event still works, I'll have to use that for now as it's stopping me working otherwise.

Interestingly as well, when you copy the code from https://developer.microsoft.com/en-us/fabric#/components/dropdown, the signature for the onChange handler shows a TS error. So when using the following from the docs above

public changeState = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
    console.log('here is the things updating...' + item.key + ' ' + item.text + ' ' + item.selected);
    this.setState({ selectedItem: item });
  };

You get the following error when assigning this to onChange:

[ts] Type '(event: FormEvent<HTMLDivElement>, item: IDropdownOption) => void' is not assignable to type '(event: FormEvent<HTMLDivElement>) => void'. [2322]

[kalyany1]

Nearly a month back, when I had noticed that 'onChange' is not firing, I have to use onChanged (deprecated) which worked for me. But, in a long term perspective this will be an issue.

[zbrox]

I'm using this for an Office Online add-in and I observe the same behaviour.

[axxx307]

I've ran into the same problem. @kalyany1 workaround with using deprecated 'onChanged' did help.

[ThreadPitt]

Same issue here, is this going to be fixed? ETA? Is this still maintained? Or is it dead like Fabric.js?

This came up as early as may 2018 (brendenseidel commented on May 23, 2018). And MS wants us to use this in enterprise software!?
Thx!

[JasonGore]

I provided a CodePen that shows onChange being fired above which is still working as expected. It is not "dead like Fabric.js", @ThreadPitt.

Can anybody reporting this issue reproduce it in a CodePen? Can you tell which version of Fabric you are using?

[dzearing]

Just to be really, super clear, this does not repro in the current version of Fabric. I also did a codepen here: https://codepen.io/dzearing/pen/pGpaXR

You might be on an old version. @ThreadPitt @axxx307 @zbrox do you know what version you're on? Can you look at your node_modules/office-ui-fabric-react/package.json for this?

[dzearing]

I am fairly convinced that this is a Fabric v5.x issue. It is certainly possible we could cherrypick a fix here, but I'd like to make sure that's the case and that a fix to 5.x would help here.

[dzearing]

I have gotten in touch with office addins and they will be updating the yeoman template dependencies on monday.

Following up on the spfx templating.

We are looking at what can be done to backport fixes to 5.x build.

[KevinTCoughlin]

I'm going to investigate this by creating a web part and looking through OUFR 5.x change history. However an answer to the following would be helpful:

You might be on an old version. @ThreadPitt @axxx307 @zbrox do you know what version you're on? Can you look at your node_modules/office-ui-fabric-react/package.json for this?

Knowing which version of OUFR those affected are on will help pinpoint the regression if it exists.

[KevinTCoughlin]

I have gotten in touch with office addins and they will be updating the yeoman template dependencies on monday.

Following up on the spfx templating.

We are looking at what can be done to backport fixes to 5.x build.

Refreshed and saw the above. Will sync to understand the SPFx templating story.

[KevinTCoughlin]

The prop onChanged was deprecated wholesale in favor of onChange in https://github.com/OfficeDev/office-ui-fabric-react/commit/137fbcef0a2c118db0097f38075427a41c769ca0#diff-de0b982ce1e3f05601608127c8b3fcd8 targeting 6.x.

To resolve the above issue, we have a few options:

1. Folks running into this issue are likely to be on 5.x and can either use onChanged or upgrade to 6.x
   to unblock themselves.
2. Cherry-pick the above commit isolated to Dropdown related files. However, with this approach folks may still run into the problem where they expect onChange to work in 5.x for other components based on our _current_ documentation.
3. Cherry-pick _all_ of the above commit. This would require testing given the surface area and that some of the component internals have changed between 5.x and 6.x. The cherry-pick isn't clean.

The first option seems ideal since it would simply require consumers change onChange usage to onChanged in 5.x as we enable versioned documentation to resolve this documentation inconsistency.

I will confirm that onChanged works in 5.x and that both onChanged and onChange work in 6.x to support the first option.

Note with options 2 and 3 that consumers of 5.x would upgrade and receive deprecation notices regarding onChanged.

[ThreadPitt]

Hi,
first of all thank you for your fast replies - so the project is not only alive, but vibrant :-)
I checked the ChangeLog of the npm package we use ("office-ui-fabric-react") and in there I find:

"Change Log - office-ui-fabric-react

This log was last generated on Tue, 29 Jan 2019 13:35:55 GMT and should not be manually modified.

6.131.0
Tue, 29 Jan 2019 13:35:55 GMT"

I will retest this now, but the issue came up on IE and Chrome...

UPDATE: Ok, so this works now, seems to be a mixup in the team, sorry for that. What still does not work and is still open is #6849, that's where the problem originally stemmed from and then we tried a lot of work-arounds with onchange/onchanged, since we wanted to have one central "onChange" handler for all form elements.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[rejoystom]

Guys all your problems are caused by a typo... 'onChange' (javascript) and 'onChanged' (JSX) are different.
Just replace with 'onChanged={this.yourFunction.bind(this)}'

[valentinbourqui]

I'm currently working with SharePoint Framework and Office UI Fabric 5.135.0. And i got the same problem on Toggle component. OnChanged works perfect but not Onchange.

it's a shame because with redux-form when you passing all props input, function onChange isn't directly called. :(

[lutherdexter]

Chaps,
I'm having this issue and we are using 6.157.0. Any fixes?

[JasonGore]

The previous CodePens I've posted as well as one specifically targeting v6.157.0 seem to be working as expected.

[lutherdexter]

@JasonGore - something isn't quite right with the onChange property definition for DDL. I replicated your CodePen and still have the same issue.

[JasonGore]

What is DDL? Can you share your CodePen with the issue? If we can't repro it in a CodePen I'm not sure we can address the underlying issue.

[lutherdexter]

@JasonGore ,

DropDownList.

See codepen here

[JasonGore]

DropDownList is not a component anywhere in Fabric, thus my confusion.

Your CodePen wasn't running correctly so I updated it here. I see changeState getting called. Can you elaborate on the issue you're seeing?

[lutherdexter]

Thanks for updating the code, I can see it works in codepen. I tried your updated version in my environment and the issue remains.

The issue is simple: nothing happens when you click the chevron. You can scroll through options with the up/down arrow keys when the drop down is in focus.

[JasonGore]

Please define "nothing". What do you expect to happen when you click on the chevron? It's expanding for me and acting as expected.

This issue specifically is about onChange not being called. I do see onChange being called when an option is selected. onChange won't be called as you're scrolling through options as that would cause a lot of undesired callback activity when a user hasn't made a selection.

I think at this point the best thing to do would be to create an issue with a recording, animated gif, or clear description of the erroneous behavior you're seeing in a CodePen. If it's not replicable in a CodePen, it has to be something local to your environment that we won't be able to isolate and identify on our end, unfortunately.

[lutherdexter]

Thanks @JasonGore - I've created an issue for it here #8547

[trevorkoch]

I experience the same problem in my SPFX project. When the dropdown selection changes, the onChange event doesn't fire. When I change "onChange" to "onChanged" it does work but I had to use // @ts-ignore.