react-select Creatable: transforming created options - reactjs

Question

I trying to use react-select's Creatable select component to allow users to add multiple CORS Origins to be registered for my authentication server. I would like to be able to allow users to paste full URLs, and have these URLs be transformed into Origins (format: <protocol>://<origin>[:port]) once they are added to the Creatable select.
As an example, the user could paste http://some-domain.com:1234/management/clients?param1=abc&param2=123#fragment_stuff into the Creatable select, and this whole URL would automatically be converted/added as just its origin components: http://some-domain.com:1234.
This is a reduced version the component I've wrote (TypeScript):
import CreatableSelect from 'react-select/creatable';
...
type MyOptionType = {
label: string,
value: string,
}
function SomeComponent(props:{}) {
const [options, setOptions] = useState<MyOptionType[]>([]);
const onOptionsChanged = (newOptions: OptionsType<MyOptionType>) => {
// Get only options containing valid URLs, with valid origins
const validUrlsWithOrigins = newOptions.filter(option => {
try {
return !!(new URL(option.value).origin);
} catch (error) {
return false;
}
});
// Transform options (e.g.: "http://some-domain.com:1234/abc?def=ghi#jkl" will become "http://some-domain.com:1234")
const newOptionsOrigins = validUrlsWithOrigins
.map(option => new URL(option.value).origin)
.map(origin => ({label: origin, value: origin}));
setOptions(newOptionsOrigins);
}
return <CreatableSelect isMulti options={options} onChange={onOptionsChanged} />
}
While debugging using React Developer Tools, I can see that the state of my component is being transformed accordingly, having only the origin part of my URLs being kept in the state:
The problem is that the Creatable select component is rendering the full URL instead of only the URL's Origin:
Why isn't the Creatable select in sync with the component's state? Is there a way to solve this, or is it a limitation on react-select?

Answer 1

You need to distinguish two things here - options prop of CreatableSelect holds an array of all the possibilites. But the value of this component is managed by value property.
You can check Multi-select text input example on docs page but basically you'll need to:
keep values and option separetly:
const [options, setOptions] = React.useState<MyOptionType[]>([]);
const [value, setValue] = React.useState<MyOptionType[]>([]);
const createOption = (label: string) => ({
label,
value: label
});
<CreatableSelect
isMulti
options={options}
value={options}
onChange={onOptionsChanged}
/>
and modify your onOptionsChanged function
set value of transformed and validated input
add new options to options state variable (all options, without duplicates)
Here's some example:
// Transform options (e.g.: "http://some-domain.com:1234/abc?def=ghi#jkl" will become "http://some-domain.com:1234")
const newOptionsOrigins = validUrlsWithOrigins
.map((option) => new URL(option.value).origin)
.map((origin) => createOption(origin));
setValue(newOptionsOrigins);
//get all options without duplicates
const allUniqueOptions: object = {};
[...newOptionsOrigins, ...options].forEach((option) => {
allUniqueOptions[option.value] = option.value;
});
setOptions(
Object.keys(allUniqueOptions).map((option) => createOption(option))
);
};