Popups and Tooltips steal focus from input fields

[dgolds]

Steps

1. A page with inputs and Popups. Focus on an input then mouseover an item with a popup.tooltip

Expected Result

1. Mousing over items with popups/tooltips should not steal focus from the input since the user can easily knock a mouse/trackpad during typing
2. Note that this is what happens with semantic-ui

Actual Result

1. The input loses focus

Version

0.64.8

Testcase

Fork this to show the issue: http://codepen.io/levithomason/pen/ZpBaJX

[levithomason]

This was introduced in #1154, setting focus on the Portal when opened to allow keyboard navigation. We've had other issues with this approach as well:

• fix(Portal): do not take focus after first render #1215 focus stolen on re-render
• fix(Portal): focus is stolen when clicking away to close #1271 focus stolen on close

Given that we now also have the issue of focus stolen on open, I think it is clear that we need to nix this feature. There is no possible way to know when it is appropriate to set/restore focus to/from a Portal.

If user's need focus onMount, they will have to set it manually. The use cases for this are far fewer than the use case of not wanting focus to change.

TL;DR

This feature should be removed.

[iamdanthedev]

The problem is, that if let's say a popup should render a component which sets focus on it's child in componentDidMount, the popup steals focus almost immediately :( At the same time onOpen and onMount popup events happen earlier that the popup content is rendered..

browser.js?13f9:123 semanticUIReact:portal handleTriggerClick() - open +2s
browser.js?13f9:123 semanticUIReact:portal open() +1ms
browser.js?13f9:123 semanticUIReact:popup handleOpen() +1ms

///// onOpen
browser.js?13f9:123 Eatalizer:RecipeEditor onOpen() +2ms

browser.js?13f9:123 semanticUIReact:portal componentDidUpdate() +2ms
browser.js?13f9:123 semanticUIReact:portal renderPortal() +1ms
browser.js?13f9:123 semanticUIReact:portal mountPortal() +1ms
browser.js?13f9:123 semanticUIReact:popup handlePortalMount() +2ms

///// onMount
browser.js?13f9:123 Eatalizer:RecipeEditor onMount() +1ms

browser.js?13f9:123 semanticUIReact:dropdown componentWillMount() +37ms
browser.js?13f9:123 semanticUIReact:dropdown setValue() +2ms
browser.js?13f9:123 semanticUIReact:dropdown value +6ms large
browser.js?13f9:123 semanticUIReact:dropdown render() +5ms
browser.js?13f9:123 semanticUIReact:dropdown props +2ms Object {options: Array[16], defaultValue: "large", selection: true, additionLabel: "Add ", additionPosition: "top"…}
browser.js?13f9:123 semanticUIReact:dropdown state +3ms Object {open: undefined, value: "large", selectedLabel: undefined, searchQuery: "", selectedIndex: 6}
browser.js?13f9:123 semanticUIReact:dropdown renderHiddenInput() +3ms
browser.js?13f9:123 semanticUIReact:dropdown name:      undefined +3ms
browser.js?13f9:123 semanticUIReact:dropdown selection: true +5ms
browser.js?13f9:123 semanticUIReact:dropdown value:     large +2ms
browser.js?13f9:123 semanticUIReact:dropdown renderLabels() +4ms
browser.js?13f9:123 semanticUIReact:button render icon && !label: +51ms Object {classes: "ui green icon button"}

///// Me setting focus
browser.js?13f9:123 Eatalizer:PopupEditorContent componentDidMount() +5ms

browser.js?13f9:123 semanticUIReact:popup popupMounted() +17ms
browser.js?13f9:123 semanticUIReact:popup portal props: +3ms Object {openOnTriggerClick: true, closeOnTriggerClick: true, closeOnDocumentClick: true}
browser.js?13f9:123 semanticUIReact:portal componentDidUpdate() +5ms
browser.js?13f9:123 semanticUIReact:portal renderPortal() +0ms
browser.js?13f9:123 semanticUIReact:dropdown componentWillReceiveProps() +24ms
browser.js?13f9:123 semanticUIReact:dropdown to props: +3ms Object {}
browser.js?13f9:123 semanticUIReact:button render icon && !label: +7ms Object {classes: "ui green icon button"}

[iamdanthedev]

#1326

[levithomason]

PR for the original issue coming, we'll address the additional items raised in #1326 separately.

[levithomason]

Released in [email protected]