client: fix focusing input when clicking chat container

[williamboman]

Not sure why it delegates events to the .messages container.

[maxpoulin64]

There's no need to change this. There's a reason it delegates for .messages: that's the only place that makes sense to focus the input on when you click. There's no point focusing the input when you click on the menu, or when you use the users list. This also breaks the search box in the users list, as you forcibly put the focus back on the chat input, so you can't search anymore. 👎

[williamboman]

Oh I didn't realise chat is the #chat wrapper. What about #chat .chat? If there aren't enough messages the .messages container won't cover enough area vertically to capture all click events in the chat area.

[maxpoulin64]

Just add a min-height: 100%; to #chat .chat .messages, that will make it cover it all and fix the issue.

[williamboman]

Just add a min-height: 100%; to #chat .chat .messages, that will make it cover it all and fix the issue.

Idk

[maxpoulin64]

Hmm, that worked fine for me on Chrome. Another option would be to check that the event's e.target was either .chat or .messages and do nothing else otherwise. We could also drop the events in the other panels, but it's very kludgy and error-prone if we end up adding another panel so I'd really prefer the other option.

[xPaw]

Would it work if you delegated on .chat?

[zakness]

This bug is one of my biggest frustrations, thanks for looking into it!

The stretching issue with min-height is due to display: table-* rules on .messages and its children. Have you tried using flexbox for layout (assuming you dont care about old browsers)? In any case, simply removing display: table from #chat .messages seems to do the trick while still preserving the layout (at least on Chrome). Then add the min-height to fix the click-focus:

#chat .messages {
  display: table; /* remove this */
  min-height: 100%; /* add this */
}

[xPaw]

👍 .chat delegate fixes the issue. @maxpoulin64 confirm?

[astorije]

👍 and merging.