antd optionRender (5.11.0) justify description to the right side

Question

With antd 5.11.0 there was a optionRender prop introduced for the Select component: https://ant.design/components/select

I want to display an icon as well as the option's label on the left side and the description on the right side, but everything is justified on the left side.

    optionRender={(option) => (
      <Space style={{justifyContent: 'space-between'}}>
        <Space style={{justifyContent: 'start'}}>{ option.data.desc=='tag' ? <TagOutlined style={{color: 'red'}}/> : (option.data.dataType=='string' ? <FieldStringOutlined style={{color: '#13c2c2'}}/> : (option.data.dataType=='boolean' ? <FieldBinaryOutlined style={{color: '#13c2c2'}}/> :  (option.data.dataType=='numeric' ? <FieldNumberOutlined style={{color: '#13c2c2'}}/> : <FieldTimeOutlined style={{color: '#13c2c2'}}/> ))) }
        {option.data.label}</Space>
        <Space style={{justifyContent: 'end'}}>{option.data.desc}</Space>
      </Space>
    )}

I also tried float: 'right' that was described here https://stackoverflow.com/a/53994006/14227630 , though for the older dropdownStyle prop. Thank you for any help!

Answer 1

antd 5.14.2.

Adding the display: 'flex'; to the outer <Space/> component.

import { Select, Space } from 'antd';
import { TagOutlined } from '@ant-design/icons';

export const App = () => {
  return (
    <div>
      <Select
        options={[
          {
            label: 'USA',
            value: 'usa',
            desc: 'USA (美国)',
          },
          {
            label: 'Japan',
            value: 'japan',
            desc: 'Japan (日本)',
          },
          {
            label: 'Korea',
            value: 'korea',
            desc: 'Korea (韩国)',
          },
        ]}
        defaultValue="usa"
        style={{ width: 200 }}
        optionRender={(option) => (
          <Space style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Space>
              <TagOutlined style={{ color: 'red' }} />
              {option.data.label}
            </Space>
            {option.data.desc}
          </Space>
        )}
      />
    </div>
  );
};

Output:

stackblitz