Multiselect: click target extends outside element boundary in Chrome

[jon-bloomerang]

In Chrome, the click target for focusing the multiselect input and opening or closing the dropdown extends beyond the element boundary. I see the issue in Chrome 48.0.2564.103 m, but not in IE11 or Firefox 44.

For example, see the attached screenshot from the React-Widgets demo page. Clicking below and to the left of the input (the orange area) opens the dropdown, then clicking directly left of the input (the yellow area) closes the dropdown.

The problem appears to be the "float: left" style on .rw-multiselect-wrapper>.rw-input. Removing the float doesn't seem to cause any adverse effects, but I didn't test exhaustively.

Thanks for a great library with all the examples and documentation!

[jquense]

well this is a weird one...unfortunately the float is necessary, but I am not at all sure why this is happening, it seems like its a browser bug. Luckily it doesn't seem like the focus trigger area overlaps anything below it so it doesn't wrong steal focus from an input underneath it, but its still annoying.

[jon-bloomerang]

After some more digging, I see that the float is necessary on the input because the taglist items are also floated. However, I'm using the following changes as a workaround and they seem to be working:

• No float on input.rw-input
• No float on ul.rw-multiselect-taglist > li
• display: inline on ul.rw-multiselect-taglist (instead of block)
• A couple of vertical-align tweaks to get everything aligned

Is there another reason that all of the tags and the input need to be floated? They should be able to use the normal flow and wrapping of the parent div.rw-multiselect-wrapper.

[jquense]

there isn't necessarily any reason to float them if you can accomplish the same thing with a different approach. I would like just inline-ing all the things would work fine, care to PR your changes?

[willdady]

I'm getting the same issue on Chrome. Definitely a weird one. Thanks @jon-bloomerang , your solution looks like it'll work but yes need to tweak vertical alignment.

Another solution could be to try move the input to inside the last li in the list. I see the point of keeping the input out of the ul from a semantics point-of-view but might be worth a short.

[jon-bloomerang]

Just opened pull request #320

[jon-bloomerang]

I haven't worked with less before, but I believe I made all the right changes. Let me know if anything looks wrong.

[jquense]

closed by #320