title: react-select Creatable: transforming created options
body: <p>I trying to use <a href="https://react-select.com/" rel="nofollow noreferrer">react-select</a>'s <a href="https://react-select.com/creatable" rel="nofollow noreferrer">Creatable</a> 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: <code>&lt;protocol&gt;://&lt;origin&gt;[:port]</code>) once they are added to the Creatable select.</p>
  <p>As an example, the user could paste <code>http://some-domain.com:1234/management/clients?param1=abc&amp;param2=123#fragment_stuff</code> into the Creatable select, and this whole URL would automatically be converted/added as just its origin components: <code>http://some-domain.com:1234</code>.</p>
  <p>This is a reduced version the component I've wrote (TypeScript):</p>
  <pre><code>import CreatableSelect from 'react-select/creatable';
  ...
  
  
  type MyOptionType = {
      label: string,
      value: string,
  }
  
  function SomeComponent(props:{}) {
      const [options, setOptions] = useState&lt;MyOptionType[]&gt;([]);
  
      const onOptionsChanged = (newOptions: OptionsType&lt;MyOptionType&gt;) =&gt; {
          // Get only options containing valid URLs, with valid origins
          const validUrlsWithOrigins = newOptions.filter(option =&gt; {
              try {
                  return !!(new URL(option.value).origin);
              } catch (error) {
                  return false;
              }
          });
  
          // Transform options (e.g.: &quot;http://some-domain.com:1234/abc?def=ghi#jkl&quot; will become &quot;http://some-domain.com:1234&quot;)
          const newOptionsOrigins = validUrlsWithOrigins
              .map(option =&gt; new URL(option.value).origin)
              .map(origin =&gt; ({label: origin, value: origin}));
          setOptions(newOptionsOrigins);
      }
  
      return &lt;CreatableSelect isMulti options={options} onChange={onOptionsChanged} /&gt;
  }
  </code></pre>
  <p>While debugging using React Developer Tools, I can see that the state of my component is being transformed accordingly, having only the <strong>origin</strong> part of my URLs being kept in the state:</p>
  <p><a href="https://i.stack.imgur.com/AQyFz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AQyFz.png" alt="React Developer Tools" /></a></p>
  <p>The problem is that the Creatable select component is rendering the full URL instead of only the URL's Origin:</p>
  <p><a href="https://i.stack.imgur.com/yNeex.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yNeex.png" alt="Creatable select's rendered output" /></a></p>
  <p>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?</p>