Pickers select items on suggestions dismissal after first selection even when input is empty

[Nimelrian]

Bug Report

• Package version(s):
  • office-ui-fabric-react: 5.20.0
  • react: 16.0.0
  • react-dom: 16.0.0
• Browser and OS versions: Chrome Version 62.0.3202.62 / Windows 10 Pro Version 1703

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? No

Requested priority: Normal

Describe the issue:

When using a picker (e.g. a simple tag picker) and using the onEmptyInputFocus prop, dismissing the suggestion dropdown causes items to be selected after an item has been initially picked.

Actual behavior:

When dismissing the suggestions with a click outside the dropdown, an item gets selected (from what I can tell it's always the first suggestion) even if the input is empty.

Expected behavior:

When dismissing the suggestions with a click outside the dropdown and when the input is empty, the input should lose focus, the suggestions should get dismissed and no item should be added.

If applicable, please provide a codepen repro:

CodeSandbox instead of codepen, but does the same job:

https://codesandbox.io/s/4q77p02l10

[amadeogallardo]

I'm also able to reproduce this issue. @Nimelrian did you find a hotfix to apply on application code? Possibly handling some of the provided events for onBlur, onFocus, onEmptyInputFocus, etc.?

[micahgodbolt]

I was not able to repro this in codepen. I added more text below the picker to make it easier to click. https://codepen.io/micahgodbolt/pen/VyjWam

[Nimelrian]

@micahgodbolt

1. Click into picker, suggestions drop down
2. Click cyan
3. Click outside of picker (doesn't have to be on the text), just blur it
4. Click inside picker, suggestions drop down again
5. Click on text
6. black will be added

[micahgodbolt]

Yeah, it's kind finicky. I was able to get it to repro eventually.

[micahgodbolt]

If you load the page fresh and click in and then click out, it works fine. But as soon as you click on an item once...or up/down arrow once, it starts grabbing whatever you have focus on.

[micahgodbolt]

While I have no trouble with an onDismiss callback (with some tweaks I mentioned), I feel thats a bit of a bandaid. I'll check with the author of that code and see if he has feedback on why it's written that way.

[micahgodbolt]

After a bit of a chat what we determined was that pickers were really never meant to act as dropdown selectors. They always took some input, filtered the list based on that input and then inserted your selection. That also meant if you half selected a word and moved focus away, that selected word would populate the picker. That's an expected behavior that is causing trouble for you because you aren't filtering your suggestions.

But I totally get your usecase. Often you'll have a small list you want people to choose from and you don't want them to need to type to discover them. So I think for now, the best approach is an onDismiss callback (with the modifications I mentioned). This may not be the way we handle this in future, but a callback function adds value and will meet your needs for now.