UIGridLayout SortOrder by name doesn't sort numbers properly!

Bug Reports Engine Bugs
#1

Reproduction Steps

  1. Create a ScreenGui with a Frame as a child set to whatever size. Just enough so you can see the grid layout.
  2. Put a UIGridLayout inside the frame and set its SortOrder to “Name”
  3. Put a bunch of TextButtons in the Frame and name them accordingly: 10, 20, 100, 200, 1000, 2000
  4. Observe the order and check if it is sorted numerically. It’s not!
    A place file is provided below for quick prototyping:
    UIGridLayout Bug.rbxl (46.5 KB)

Expected Behavior
As a developer that wants to sort UI elements by price for my user, I would expect the order to be from least to greatest number like this:

Expected Behavior
I want:
$10, $20, $100, $200, $1000, $2000

Actual Behavior
However, what actually happens is quite annoying. The numbers sort from 0-9 on the greatest decimal place, then the next greatest and so on. The result is a very bizarre sort:

Actual Behavior1
Actual Behavior1695×156 23.7 KB

I get:
$10, $100, $1000, $20, $200, $2000

In the actual production environment, this is very bad behavior because it means that I get grids like this where expensive items are at the top when I wanted them to be at the bottom for UX purposes.

Weird grid1

Workaround
For now, we’re using LayoutOrder to circumvent this. But other developers might want to sort alphanumerically from a name for whatever reason. So while it’s not impossible to work around this, the numerical sort is broken and makes absolutely no intuitive sense. No good reason to keep it the way it is that I can think of.

Issue Area: Engine
Issue Type: Display
Impact: Moderate
Frequency: Constantly
Date First Experienced: 2022-02-09 00:02:00 (-08:00)
Date Last Experienced: 2022-02-09 00:02:00 (-08:00)

2 Likes
Problems with SortOrder set to name not working in a UiGridlayout - Solution
#2

Was just talking about this with AbstractAlex…
Seems like this is called a “Lexicographical sort” and the reason why this is happening is because the numbers are being passed as strings to the sorting algorithm. So technically:

-- Strings
print("20" > "100")
> true
-- Integers
print(20 > 100) 
> false

I see why this happens now. An engine-side fix for this might include checking if every character is a number and then sorting accordingly to that. But not sure if this is something the engine team wants to do. On one hand, lexicographical sorting doesn’t seem very practical. But on another hand, a Lua purist out there might be depending on this behavior as the Explorer would sort items. Not sure what the move is here, so I’ll leave that for staff to decide.

In my opinion (and I’m bias to changes here), alphanumeric sort is more practical than lexicographic in the context of a UI Layout. Here’s a potential solution that frankly might be high effort, low impact:

Lexicographical vs Alphanumeric

For now we’ll just use LayoutOrder and this seems to be the solution.

#3

This isn’t an engine bug, LayoutOrder just uses strings to sort instead of integers. It would be very convoluted to make the LayoutOrder check if the name is completely numerical

1 Like
#4

What you’re getting is the intended behavior and it should stay that way.

If you want to keep using SortOrder by name, one option is to pad numbers with 0.
So while "20" > "100" evaluates to false, this will be true "020" > "100".
or you could write an algorithm to convert numbers to strings in a way that they keep their order.

4 Likes
#5