Fluentui: onFocus event in PeoplePicker not firing

Created on 13 Sep 2019  路  5Comments  路  Source: microsoft/fluentui

Environment Information

  • Package version(s): 6.203.5
  • Browser and OS versions: Chrome 76 on Windows 10

Please provide a reproduction of the bug in a codepen:

Can be seen with this codepen:
https://codepen.io/cwdata/pen/bGbKxQY

Actual behavior:

When clicking inside the PeoplePicker no alert is shown. When leaving the control the onBlur is fired and showing the alert "blur"

Expected behavior:

An alert "focus" should be shown when the focus is set inside the PeoplePicker just like the onBlur works when the control is loosing focus.

Priorities and help requested:

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

Requested priority: (High)

Products/sites affected: (our SPFx application)

PeoplePicker Pickers Author Feedback Fixed

Most helpful comment

@natalieethell It looks like it was unused in the PR that added it. Furthermore I don't see it referenced anywhere even back a ways, so it wasn't a recent removal if it was ever added. I think we should deprecate and remove it to prevent confusion.

All 5 comments

Hey @cwdata thanks for providing a CodePen! Have you tried using inputProps.onFocus? Here's an example:

<NormalPeoplePicker 
        inputProps={{
          onFocus: () => alert("focus")
        }} 
        onResolveSuggestions={() => {return []}} 
        onBlur={() => alert("blur")}
/>

https://codepen.io/naethell/pen/gOYBYrM

Let us know if that works for your scenario!

Following a little more investigation, it looks like, currently, this.props.onFocus isn't actually read anywhere in BasePicker. this.props.inputProps.onFocus is called, though. @joschect what is the use case for this.props.onFocus in BasePicker? Here's a link to a discussion in the PR that added it: https://github.com/OfficeDev/office-ui-fabric-react/pull/2445#discussion_r132306897.

@natalieethell It looks like it was unused in the PR that added it. Furthermore I don't see it referenced anywhere even back a ways, so it wasn't a recent removal if it was ever added. I think we should deprecate and remove it to prevent confusion.

Opened a PR to deprecate onFocus, linked above.

:tada:This issue was addressed in #10482, which has now been successfully released as [email protected].:tada:

Handy links:

@natalieethell
Thanks for your suggestion. Using inputProps.onFocus works well in our scenario.

Was this page helpful?
0 / 5 - 0 ratings