Antd Select - how to show different value in the dropdown and Input field

Question

Current UI

Expected Behaviour

How can I do it?

App.tsx

import React from "react";
import "./index.css";
import { Select } from "antd";

const { Option } = Select;

const countryNames = [
  {
    name: "Japan",
    code: "+987"
  },
  {
    name: "aVeryVeryVeryVeryLongCountryName",
    code: "+123"
  }
];

const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};

const App: React.FC = () => (
  <>
    <Select defaultValue="Japan" onChange={handleChange}>
      {countryNames.map((country) => (
        <Option key={country.name} value={country.name}>
          {`${country.code} ${country.name}`}
        </Option>
      ))}
    </Select>
  </>
);

export default App;

Codesandbox
https://codesandbox.io/s/basic-usage-antd-5-1-5-forked-mfw8fj?file=/demo.tsx

Answer 1

According to antd document, Select can specify a label value from a Option props with optionLabelProp, which in this use case can get value from country.code.

For extending size of Option based on its content, dropdownMatchSelectWidth can be set false, so that the Option is not limited to the size of Select.

Modified demo on: codesandbox

<Select
  defaultValue="Japan"
  onChange={handleChange}
  // 👇 Specify label prop here
  optionLabelProp="label"
  // 👇 Set Option to be extendable by content here
  dropdownMatchSelectWidth={false}
>
  {countryNames.map((country) => (
    <Option
      key={country.name}
      value={country.name}
      // 👇 Give label value for Select here
      label={country.code}
    >
      {`${country.code} ${country.name}`}
    </Option>
  ))}
</Select>