Suggestion box content moves around

[hjek]

Summary

Suggestion box content moves around

Steps to reproduce

• Say you wanted to link to the ~off-topic channel, so you click on the text entry box and type ~off.
• Then you move the mouse to the suggestion box where it says Off Topic
• Click on that channel name, except just before you clicked the channel name has changed to something else, because Off Topic was suddenly moved further up the list.

Expected behavior

I expect elements to stay still so I can click on them. @-mentions has the same issue (and emojis).

Observed behavior (that appears unintentional)

Possible fixes

If you add elements to a list on-the-fly at a certain delay after last user input, then make sure that the existing elements in the list remain in place. MY CHANNELS could be below OTHER CHANNELS in the list.

[amyblais]

Thanks, opened a ticket: https://mattermost.atlassian.net/browse/MM-35794.

[amyblais]

Devs closed the ticket as won't fix for now. This is intended as part of the design, as new results load in the suggest box expands to show them.

[hmhealey]

To follow up on that, we don't think there's anything that could be done to change this without making the suggestion box a fixed size. Even then, there'd probably be cases where the content would shift around because the newly loaded content is either taller or shorter than the loading indicator, so there'd probably still be cases where this would be a problem. I think there might be more we could do to improve this by speeding up loading so that it's less likely that the user is able to type something and then switch to their mouse to hover over an item before the results are loaded.

Thanks for the feedback though. This isn't something I would've considered at least before now.

[hjek]

To follow up on that, we don't think there's anything that could be done to change this without making the suggestion box a fixed size.

There is a very simple fix that doesn't require a fixed size suggestion box: Swap around MY CHANNELS and OTHER CHANNELS. Below is an illustration of how that would look. Notice how the Off Topic channel remains in place, so it is easier to hit with the cursor.

This is intended as part of the design, as new results load in the suggest box expands to show them.

Yes, I can see how the expanding box is intended as part of the design, and that is not my issue. My issue is that the UI elements inside the expanding box jump around, which is not good for accessibility.

[hmhealey]

That's an interesting idea. I hadn't considered flipping the categories in that list. I'm not sure if that would work in all cases (like if you had more results in My Channels), but I'll pass the suggestion along to our UX team. I'm sure they have other thoughts about how we could avoid the jumping around as well.