How to sort selected items to the top of the list for Async?

[sleslein]

My use case calls for sorting options so selected items are at the top of the list. I was able to accomplish this for the Select component using the onChange event. This same pattern doesn't seem to work for the Async component because of how the loadOptions feeds options into the menu list.

I've created an example on CodeSandbox. https://codesandbox.io/s/codesandboxer-example-forked-05orp2?file=/example.tsx

The code snippet looks like this:

import React, { useRef, useState } from "react";

import AsyncSelect from "react-select/async";
import Select from "react-select";
import { options as baseOptions } from "./options";

const filterColors = (inputValue: string) => {
  return baseOptions.filter((i) =>
    i.label.toLowerCase().includes(inputValue.toLowerCase())
  );
};

const loadOptions = (inputValue: string, callback: (options) => void) => {
  setTimeout(() => {
    callback(filterColors(inputValue));
  }, 1000);
};

export default () => {
  /** Select Options */
  const initialOptions = useRef(baseOptions);
  const [options, setOptions] = useState(initialOptions.current);

  function onSelectChange(newOptions, action) {
    const stateOptions =
      initialOptions.current?.filter((option) => {
        return !newOptions.find((newOpt) => {
          return newOpt === option;
        });
      }) ?? [];
    const updatedOptions = newOptions?.concat(stateOptions);
    setOptions(updatedOptions);
  }

  /** Async Options */
  const [asyncOptions, setAsyncOptions] = useState(initialOptions.current);

  function onAsyncChange(newOptions, action) {
    const stateOptions =
      initialOptions.current?.filter((option) => {
        return !newOptions.find((newOpt) => {
          return newOpt === option;
        });
      }) ?? [];
    const updatedOptions = newOptions?.concat(stateOptions);
    setAsyncOptions(updatedOptions);
  }

  return (
    <>
      <label>Select</label>
      <Select
        isClearable
        isMulti
        hideSelectedOptions={false}
        onChange={onSelectChange}
        options={options}
      />

      <label>Async</label>
      <AsyncSelect
        loadOptions={loadOptions}
        defaultOptions
        isMulti
        hideSelectedOptions={false}
        onChange={onAsyncChange}
        options={asyncOptions}
      />
    </>
  );
};

Given an initial list of options that are sorted Option 1, Option 2, Option 3, Option 4
The output looks like this:
Select

Async Notice the selected value are not, but should be sorted with the selected items at the top of the list.

Any suggestions would be helpful!

[sleslein]

I think I figured out a work around for this buy sorting the selected values in the with a custom MenuList component. Another bonus of this solution is that it doesn't require wrapping the onChange in a custom handler to mutate the selected values. It merely updates the order the existing items are rendered.

Code Sandbox Example: https://codesandbox.io/s/react-select-async-sort-selected-working-ex3oug

Example Code

import React from "react";

import AsyncSelect from "react-select/async";
import Select, { components } from "react-select";
import { options as baseOptions } from "./options";

const filterOptions = (inputValue: string) => {
  return baseOptions.filter((i) =>
    i.label.toLowerCase().includes(inputValue.toLowerCase())
  );
};

const loadOptions = (inputValue: string, callback: (options) => void) => {
  setTimeout(() => {
    callback(filterOptions(inputValue));
  }, 1000);
};

export default () => {
  /** Select Options */
  const options = [...baseOptions];

  /** Async Options */
  // const [asyncOptions, setAsyncOptions] = useState(initialOptions.current);
  function MenuList(props) {
    if (props.isLoading) {
      return <components.MenuList {...props} />;
    }
    const selectedOptions =
      props.children?.filter?.((childNode) => childNode.props.isSelected) ?? [];
    const nonSelectedOptions =
      props.children?.filter?.((childNode) => !childNode.props.isSelected) ??
      [];
    const childrenToRender = [...selectedOptions, ...nonSelectedOptions];
    return (
      <components.MenuList {...props}>{childrenToRender}</components.MenuList>
    );
  }

  return (
    <>
      <label>Select</label>
      <Select
        isClearable
        isMulti
        hideSelectedOptions={false}
        options={options}
        components={{ MenuList }}
      />

      <label>Async</label>
      <AsyncSelect
        loadOptions={loadOptions}
        defaultOptions
        isMulti
        hideSelectedOptions={false}
        components={{ MenuList }}
      />
    </>
  );
};

[sleslein]

This does sort the menu items the desired way. However, I just noticed it breaks proper keyboard navigation with the up and down arrows.

[june6723]

Encountered same problem...