Can be seen with this codepen:
https://codepen.io/cwdata/pen/bGbKxQY
When clicking inside the PeoplePicker no alert is shown. When leaving the control the onBlur is fired and showing the alert "blur"
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.
Are you willing to submit a PR to fix? (No)
Requested priority: (High)
Products/sites affected: (our SPFx application)
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.
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.