sortable tags in ant.design Select mode="multiple"

sortable_select.tsx

function SortableSelect<ValueType extends Array<unknown>, OptionType>(
  props: SelectProps<ValueType, OptionType>
) {
  return (
    <DndProvider backend={HTML5Backend}>
      <Select<ValueType, OptionType>
        {...props}
        tagRender={({ label, ...tagProps }) => (
          <DraggableTag
            {...tagProps}
            index={props.value?.indexOf(tagProps.value) ?? 0}
            move={(from, to) => {
              if (!Array.isArray(props.value)) {
                return;
              }

              const newValue = [...props.value];
              newValue.splice(from, 1);
              newValue.splice(to, 0, props.value[from]);
              props.onChange?.(
                newValue as any,
                props.options?.filter((_, index) =>
                  newValue.includes(index)
                ) as any
              );
            }}
          >
            {label}
          </DraggableTag>
        )}
      />
    </DndProvider>
  );
}

function DraggableTag({
  index,
  move,
  ...props
}: { index: number; move: (from: number, to: number) => void } & TagProps) {
  const ref = useRef<HTMLElement>(null);
  const [styles, drop] = useDrop<{ index: number }, unknown, CSSProperties>({
    accept: "DraggableTag",
    collect: (monitor) => {
      const item = monitor.isOver() && monitor.getItem();
      if (item && item.index > index) {
        return {
          borderLeft: "5px solid #1890ff",
          paddingLeft: "5px",
        };
      } else if (item && item.index < index) {
        return {
          borderRight: "5px solid #1890ff",
          paddingRight: "5px",
        };
      } else {
        return {};
      }
    },
    drop: (item) => {
      move(item.index, index);
    },
  });
  const [, drag] = useDrag<{ index: number }, unknown, CSSProperties>({
    type: "DraggableTag",
    item: { index },
  });
  drop(drag(ref));
  return (
    <span style={{ display: "inline-block", cursor: "move", ...styles }}>
      <Tag
        {...props}
        ref={ref}
        onMouseDown={(event) => {
          // stop antd from preventing the default
          event.stopPropagation();
        }}
      />
    </span>
  );
}