Skip to content

Merge options under <optgroup> when possible #4010

@sliekens

Description

@sliekens

I have a grouped select2 list that uses pagination to load 30 list items at a time. Each <optgroup> contains one or more <option> list items.

Feature request: an option group can cross the boundary of 30 items. When this happens, groups with the same labels at the page boundaries should be merged.

Example

optgroup group 1 contains 31 options, AJAX page size is 30.

AJAX Page 1

{
  "results" : [
    { 
      "text" : "group 1"
      "children" : [
        {
          "id" : "item1"
          "text" : "first item"
        },
        {
          "id" : "item2"
          "text" : "second item"
        },
        // items 3 to 29 omitted for brevity
        {
          "id" : "item30"
          "text" : "thirtied item"
        }
      ]
    }
  ]
  "pagination" : {
    "more" : true
  }
}

AJAX Page 2

{
  "results" : [
    { 
      "text" : "group 1"
      "children" : [
        {
          "id" : "item31"
          "text" : "thirty-first item"
        }
      ]
    }
  ]
  "pagination" : {
    "more" : false
  }
}

Expected result

The code should recognize that page 2 should be merged with page 1 instead of appended, because the group header is the same.

<optgroup label="group 1">
    <option value="item1">first item</option>
    <option value="item2">second item</option>
    <!--  items 3 to 29 omitted for brevity -->
    <option value="item30">thirtied item</option>
    <option value="item31">thirty-first item</option>
</optgroup>

Actual result

<optgroup label="group 1">
    <option value="item1">first item</option>
    <option value="item2">second item</option>
    <!--  items 3 to 29 omitted for brevity -->
    <option value="item30">thirtied item</option>
</optgroup>
<optgroup label="group 1">
    <option value="item31">thirty-first item</option>
</optgroup>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions