1608175 - Select element closes on mouseout if this causes CSS filter to be added/removed

Status: NEW

(Core :: Layout: Form Controls, defect, P3)

Description

[Scott Callaway]

After clicking on a select element to trigger a dropdown, moving the mouse outside of the select element itself appears to fire off a mouseout event and causes the dropdown to update and close. This makes picking any of the options from the select element very difficult as oftentimes the select element has closed before a selection has occurred.

I would expect that the select element would stay open until a loss of focus.

Comment 1

[Olli Pettay [:smaug][[e-mail]]]

scott, do you have some example for this?
Since I certainly can't see that behavior for example when opening some <select> elements in this page and moving mouse.

Comment 2

[Jonathan Kew [:jfkthame]]

Also, does the problem still occur if you restart Firefox in Safe Mode (Help menu > Restart with Add-ons Disabled)? This sounds like it could easily be related to a misbehaving add-on.

Comment 3

[Scott Callaway]

Hi guys,

Thanks for the responses, apologies for the delay in getting back to you.

I've been attempting to recreate this in isolation outside in order to provide an example of what I'm seeing and haven't been able to unfortunately.

The only way I could reproduce the issue was through this CodeSandbox example, however it appears the issue here was due to the brightness attribute (not used in my scenario).

I am able to confirm that this does still happen if I try to run Firefox in Safe Mode. I am also able to confirm that it happens on a fresh install of standard Firefox on MacOS (as I have been using the Dev version).

Happy to have this closed for the time being given I'm struggling to recreate it. Starting to think now there is some weird interaction between elements going on in the page that I'm viewing it.

Thanks for taking the time.

Comment 4

[Jonathan Kew [:jfkthame]]

It seems to be the removal of the CSS filter when the mouse leaves the element that triggers the closing of the popup. If you add a rule such as

select { filter: brightness(100%); }

to the styles in that example, so that the element always has a filter regardless of :hover state, then the issue doesn't occur. (It doesn't have to be the same filter; something like select { filter: blur(1px); } will serve just as well.)

The same issue arises if the un-hovered <select> has a filter, but then you use a rule select:hover { filter:none; } to remove it in the hovered state. So it appears that either adding or removing a filter on mouse-out causes the popup to unexpectedly close.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

This is a special case of bug 1440506. In this case though, I'm not 100% sure what ends up causing the reframe... adding or removing filters causes the creation of a fixed-pos containing block. But we should avoid the reframe if there are no abspos / fixedpos frames in the subtree... Maybe the dropdown frame is considered abspos?