[Bug] suggestions are sometimes not properly ordered by sortText

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Code

monaco.languages.registerCompletionItemProvider('sql', {
    provideCompletionItems: function (model, position) {
        return {
            triggerCharacters: ["."],
            "suggestions": [
                                {
                    "insertText": "event_id",
                    "sortText": "1",
                    "kind": 14,
                    "range": {
                        "startLineNumber": 1,
                        "endLineNumber": 1,
                        "startColumn": 45,
                        "endColumn": 46
                    },
                    "detail": "event_id",
                    "documentation": "Column in my_fake_table_name_1234",
                    "label": {
                        "label": "event_id",
                        "description": "column in my_fake_table_name_1234"
                    }
                },
                {
                    "insertText": "get_events",
                    "sortText": "3",
                    "kind": 1,
                    "range": {
                        "startLineNumber": 1,
                        "endLineNumber": 1,
                        "startColumn": 45,
                        "endColumn": 46
                    },
                    "detail": "mock detail",
                    "documentation": "mock documentation",
                    "label": {
                        "label": "get_events",
                        "description": "mock description"
                    }
                },
                {
                    "insertText": "client_event_id",
                    "sortText": "2",
                    "kind": 14,
                    "range": {
                        "startLineNumber": 1,
                        "endLineNumber": 1,
                        "startColumn": 45,
                        "endColumn": 46
                    },
                    "detail": "client_event_id",
                    "documentation": "Column in my_fake_table_name_1234",
                    "label": {
                        "label": "client_event_id",
                        "description": "column in my_fake_table_name_1234"
                    }
                },
            ]
        }
    }
});

monaco.editor.create(document.getElementById('container'), {
    value: 'select * from my_fake_table_name_1234 where e',
    language: 'sql'
});

Actual Behavior

Order:

1. event_id
2. get_events
3. client_event_id

Expected Behavior

Order:

1. event_id
2. client_event_id
3. get_events

Additional Context

I expect the sortText parameter to drive the order that results are displayed and, for the most part, this seems to be the case. There does however seem to be some edge cases that cause the suggestions to not be displayed in alphabetical order according to their sortText.

It seems like maybe there are multiple heuristics influencing the sorting. In this case, updating the label->label of the last suggestion to foo_event_id seems to cause them to be ordered correctly, though I’m not sure why. The docs mention that label is used if the sortText value is falsy, but that isn’t the case here.

Playground for that:

monaco.languages.registerCompletionItemProvider('sql', {
    provideCompletionItems: function (model, position) {
        return {
            triggerCharacters: ["."],
            "suggestions": [
                                {
                    "insertText": "event_id",
                    "sortText": "1",
                    "kind": 14,
                    "range": {
                        "startLineNumber": 1,
                        "endLineNumber": 1,
                        "startColumn": 45,
                        "endColumn": 46
                    },
                    "detail": "event_id",
                    "documentation": "Column in my_fake_table_name_1234",
                    "label": {
                        "label": "event_id",
                        "description": "column in my_fake_table_name_1234"
                    }
                },
                {
                    "insertText": "get_events",
                    "sortText": "3",
                    "kind": 1,
                    "range": {
                        "startLineNumber": 1,
                        "endLineNumber": 1,
                        "startColumn": 45,
                        "endColumn": 46
                    },
                    "detail": "mock detail",
                    "documentation": "mock documentation",
                    "label": {
                        "label": "get_events",
                        "description": "mock description"
                    }
                },
                {
                    "insertText": "client_event_id",
                    "sortText": "2",
                    "kind": 14,
                    "range": {
                        "startLineNumber": 1,
                        "endLineNumber": 1,
                        "startColumn": 45,
                        "endColumn": 46
                    },
                    "detail": "client_event_id",
                    "documentation": "Column in my_fake_table_name_1234",
                    "label": {
                        "label": "FOO_event_id",
                        "description": "column in my_fake_table_name_1234"
                    }
                },
            ]
        }
    }
});

monaco.editor.create(document.getElementById('container'), {
    value: 'select * from my_fake_table_name_1234 where e',
    language: 'sql'
});

[jrieken]

there just no way to actually programmatically control the order of the suggestions once you start filtering by typing?

Yes, there is no way to enforce a constant sort order. It’s the user input that resorts and they do it by typing matching prefixes.

[jrieken]

A completion item provider is invoked, returns completions but they don’t show up! 😕 What’s the issue? Filtering! Filtering compares completions with a prefix and hides those that don’t match.

Example

• trigger completions here: say.he| (| is the cursor)
• provider returns abc, help, hood
• the editor takes the he-prefix and scores it against abc, help, and hood.
• scoring yields these result:
  • abc - no match, don’t show
  • help - good match, show
  • hood - no match, only h occurs, don’t show
• editor shows help suggestion, does not show abc and hood suggestion

Extensions Rule!

The above sample was using “defaults” to determine the prefix and the filter criteria.

• prefix: each completion can define its very own prefix via vscode.CompletionItem#range. Taking the example above, valid prefixes can be say.he or .he or (the empty string). Any range is valid as long as it includes the cursor position and is single line only.
• filter: each completion can define what string to use when filtering. The default is the label but via vscode.CompletionItem#filterText any string can be defined

When to use what? It depends on the language, its word definition, and if you control/understand the word definition or not. The defaults usually work well enough but some languages might use a non-intuitive word definition, or completions span multiple words, or completions include non-word character etc. In all those cases the range-property should be used.