Certain dialog/popover combinations mess up cursor/selection rendering in text inputs in Firefox

[AlexLandau]

Bug report

• Package version(s): 1.4.0
• Browser and OS versions: Firefox-specific bug, tested on Firefox 50.0.2 and OS X 10.11.6

Steps to reproduce

This was found in one of our projects, but I found a way to demonstrate it on the Blueprint docs page:

1. Open http://blueprintjs.com/docs/#components.dialog in Firefox.
2. Through "Edit as HTML" in the Inspector, add a text input (<input type="text"/>) after the docs-react-options div. (Using the page's "Search" bar does not work to reproduce the issue, due to its complex behaviors.)
3. Enter text in the input; observe that it has a cursor and selection appears normally.
4. Trigger the bug by clicking on "Show dialog", then clicking on "Primary" to close the dialog while the popover for that button is active.
5. The bug is now active. Observe that selecting the text in the input does not render and the cursor does not appear.
6. Cancel the bug by clicking on "Show dialog", then clicking outside the dialog to close it.
7. Observe that the bug is no longer active.

Actual behavior

While the bug is in effect, clicking on the text input does not display a cursor and selecting text in the box. It is in fact still possible to select text, but this is not represented visually. (This may be the same set of visual effects as the input not having focus.)

This applies to any text inputs that are already present on the page. (Some inputs may not appear to be affected in practice because they have popovers attached to them that trigger the "fixed" state.)

Expected behavior

Clicking on the text input shows a cursor and selecting the text highlights the selected portion.

Additional observations

By observing other triggers and fixes, I believe the bug is triggered if the dialog is closed while the popover is open, and fixed if the dialog is closed while the popover is not open.

In our application, I believe this is also triggered by closing a dialog that is opened via a button within a popover.

[mfedderly]

Blueprint 1.9.0
Firefox 51.0.1 64bit + OSX 10.11.6

Simpler repro steps:

1. Go to this page: http://blueprintjs.com/docs/#components.popover
2. Click on Releases
3. Click on Popover Target
4. Type into the search, observe there is no cursor, observe that the search text cannot be highlighted

Bonus steps:

1. Click releases
2. Type into search, observe that cursor has returned and that text can be highlighted.

[Nnicolini]

@llorca We hit this bug hard after rolling out a blueprint application last week and all of our users use firefox. Think you guys can take a look? It's causing our users a lot of pain

[llorca]

Sorry about the pain, we'll take a look ASAP.

In addition: after typing in the input with no cursor, clicking it clears it 👎 Something is very wrong

[Nnicolini]

@llorca I don't think that behavior is quite accurate. There is actually an invisible cursor in the text box, so if you carefully "highlight" half of your text after repro'ing and then hit delete, the "highlighted" text will disappear. You may have inadvertently highlighted the full text by double clicking or something similar

[Nnicolini]

Also, thank you for looking at this!

[llorca]

You're right, nevermind. I can totally repro with your steps though, thanks 👍

[AlexLandau]

If it helps trigger any ideas, I think the general form of the bug is "open two (layers of) dialogs and/or popovers, then close the first one you opened before you close the second one you opened".