Return completions in alphanumeric order

[AnandaArya]

Hello, I'm working with TypeScript in Visual Studio Code and I've noticed that the autocomplete suggestions for union types are not displayed in a logical order. Specifically, I have a union type for column sizes in a grid layout system:

[mjbvz]

Please share a complete, self contained code example as text

[AnandaArya]

Please share a complete, self contained code example as text

here's complete code

import { twMerge } from "tailwind-merge";
import { cn } from "../../../utils/tailwind";
import React from "react";

type ColSize = 
  | "1" 
  | "2" 
  | "3" 
  | "4" 
  | "5" 
  | "6" 
  | "7" 
  | "8" 
  | "9" 
  | "10" 
  | "11" 
  | "12";

  interface GridItemProps {
  xs?: ColSize;
  sm?: ColSize;
  md?: ColSize;
  lg?: ColSize;
  xl?: ColSize;
  children: React.ReactNode;
  props?: any;
  interfaceName?: string;
  className?: string;
  dataSource?: boolean;
}



export const GridItem: React.FC<GridItemProps> = ({ xs, sm, lg, md, xl, interfaceName, props = {}, children, dataSource = false, className = "" }) => {
  const gridParams = props?.params?.GridParameters || "";
  const styles = props?.params?.Styles || "";

  const colClasses = cn(
    xs ? `col-${xs}` : "col-12",
    sm ? `sm:col-${sm}` : "",
    md ? `md:col-${md}` : "",
    lg ? `lg:col-${lg}` : "",
    xl ? `xl:col-${xl}` : "",
  );
  

  return (
    <div className={twMerge("component flex-item", colClasses, interfaceName, gridParams, className, styles )}>
      {children}
    </div>
  )
}

export const Component: React.FC = () => {
  return (
      <GridItem xs="12" lg="2">
        <p>Hello World</h1>
      </GridItem>
  )
}

[mjbvz]

@jrieken I think this is generic suggest feature request to use alphanumeric sorting

[jrieken]

This might be something with TS, using the snippet below I see that all entries have the same sort text

type ColSize = 
  | "1" 
  | "2" 
  | "3" 
  | "4" 
  | "5" 
  | "6" 
  | "7" 
  | "8" 
  | "9" 
  | "10" 
  | "11" 
	| "12";
  
let foo: ColSize = 

[mjbvz]

@jrieken Ok thanks, will move upstream to get TS returning the items in the correct array order. That may be easier than changing the sortText

Example response today showing the wrong order:

024-03-12 08:54:39.719 [trace] <semantic> Response received: completionInfo (85). Request took 18 ms. Success: true  {
    "flags": 1,
    "isGlobalCompletion": true,
    "isMemberCompletion": false,
    "isNewIdentifierLocation": true,
    "entries": [
        {
            "name": "\"1\"",
            "kind": "string",
            "kindModifiers": "",
            "sortText": "11"
        },
        {
            "name": "\"10\"",
            "kind": "string",
            "kindModifiers": "",
            "sortText": "11"
        },
...

[RyanCavanaugh]

What's the bug here? The sortText isn't wrong; it's this entry:

    export const SortText = {
        // Presets
        LocalDeclarationPriority: "10" as SortText,
        LocationPriority: "11" as SortText,
        OptionalMember: "12" as SortText,

The items are coming back in lexical string ordering; VS Code can reorder those if that's desired

[jrieken]

I think there are different understandings of sortText. For VS Code it means how an item is sorted relative to other items of a result. When all sortText-values are equal we fallback to comparing labels.

@RyanCavanaugh So the ask is that TS sorts its suggestion in lexical order (in this case) or in the order declaration (in this case) because TS is has the most complete knowledge

[RyanCavanaugh]

It is sorted. 1 comes before 2 and it's a lexicographic sort.

[mjbvz]

Within the same sortText level, TS seem to already sort completion items. I think this uses TS's compareStringsCaseSensitiveUI

What we'd like is for this to use an alphanumeric sort. This may be as simple as adding numeric: true in the Intl.Collator used:

TypeScript/src/compiler/core.ts

Line 2256 in b5b6048

const comparer = new Intl.Collator(locale, { usage: "sort", sensitivity: "variant" }).compare;