fix multi-select that allows custom values bug

apideck-libraries · Apr 11, 2024 · f59bed3 · f59bed3
1 parent e2a45e5
commit f59bed3
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/src/components/SearchSelect.tsx b/src/components/SearchSelect.tsx
@@ -62,6 +62,31 @@ const SearchSelect = ({
     session: { theme: vaultTheme },
   } = useSession();
 
+  const findMatchingOption = (val: string) =>
+    options.find((option) => option.value === val);
+
+  const createNewOptionType = (val: string): OptionType => ({
+    label: val,
+    value: val,
+  });
+
+  const findOrCreateOption = (val: string): OptionType =>
+    findMatchingOption(val) ?? createNewOptionType(val);
+
+  // If the value is not in the options list, add it as a custom option
+  // It handles both single and multi-select cases
+  const addCustomOptionIfNeeded = (
+    updatedValues: OptionType | OptionType[] | undefined,
+    value: string | string[] | readonly string[] | undefined
+  ): OptionType | OptionType[] | undefined => {
+    if (!value || !updatedValues || !Array.isArray(updatedValues))
+      return updatedValues;
+
+    return typeof value === 'string'
+      ? findOrCreateOption(value)
+      : value.map((v) => findOrCreateOption(v));
+  };
+
   useEffect(() => {
     if (!value) return;
 
@@ -71,7 +96,7 @@ const SearchSelect = ({
 
     if (isCreatable) {
       option = rest.isMulti
-        ? ([{ label: value, value }] as OptionType[])
+        ? addCustomOptionIfNeeded(option, value)
         : ({ label: value, value } as OptionType);
     }
 

diff --git a/stories/Vault.stories.tsx b/stories/Vault.stories.tsx
@@ -29,8 +29,8 @@ const Template: Story<Props> = (args) => (
     trigger={<button className="p-2 border rounded shadow">Open modal</button>}
     {...args}
     showConsumer={true}
-    // unifyBaseUrl="https://localhost:3050"
-    token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZWRpcmVjdF91cmkiOiJodHRwczovL3ZhdWx0LmFwaWRlY2suY29tL29hdXRoL2NhbGxiYWNrIiwiY29uc3VtZXJfbWV0YWRhdGEiOnsiYWNjb3VudF9uYW1lIjoiQXBpZGVjayBTYW5kYm94ICIsInVzZXJfbmFtZSI6Ikpha2UiLCJpbWFnZSI6Imh0dHBzOi8vdW5hdmF0YXIuaW8vamFrZUBhcGlkZWNrLmNvbSJ9LCJ0aGVtZSI6eyJmYXZpY29uIjoiaHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vYXBpZGVjay9pbWFnZS91cGxvYWQvdjE2OTIwOTA4MDYvbWFya2V0cGxhY2VzL2Zhdmljb25fZHA0YTNsLnBuZyIsInByaW1hcnlfY29sb3IiOiIjMDMwNDVlIiwicHJpdmFjeV91cmwiOiJodHRwczovL2NvbXBsaWFuY2UuYXBpZGVjay5jb20vcHJpdmFjeS1wb2xpY3kiLCJzaWRlcGFuZWxfYmFja2dyb3VuZF9jb2xvciI6IiMxNjI2M2YiLCJzaWRlcGFuZWxfdGV4dF9jb2xvciI6IiNGRkZGRkYiLCJ0ZXJtc191cmwiOiJodHRwczovL3d3dy50ZXJtc2ZlZWQuY29tL3Rlcm1zLWNvbmRpdGlvbnMvOTU3Yzg1YzFiMDg5YWU5ZTMyMTljODNlZmY2NTM3N2UiLCJ2YXVsdF9uYW1lIjoiQXBpZGVjayBTYW1wbGVzIn0sInNldHRpbmdzIjp7InNlc3Npb25fbGVuZ3RoIjoiMjRoIn0sImNvbnN1bWVyX2lkIjoidGVzdC1jb25zdW1lciIsImFwcGxpY2F0aW9uX2lkIjoiY2ZhWnJPUmdhSDJQTVFwSWNqVHBmaEVSSXBJRVVKSGV2MDl1Y2pUcCIsInNjb3BlcyI6W10sImlhdCI6MTcwNjE3Njc0NywiZXhwIjoxNzA2MjYzMTQ3fQ.1uAkPkYkCkFRy0E2c2Sqc9kzgsUA2hlGcekyqdFerV4"
+    unifyBaseUrl="http://localhost:3050"
+    token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZWRpcmVjdF91cmkiOiJodHRwczovL215c2Fhcy5jb20vZGFzaGJvYXJkIiwiY29uc3VtZXJfbWV0YWRhdGEiOnsiYWNjb3VudF9uYW1lIjoiU3BhY2VYIiwidXNlcl9uYW1lIjoiRWxvbiBNdXNrIiwiZW1haWwiOiJlbG9uQG11c2suY29tIiwiaW1hZ2UiOiJodHRwczovL3d3dy5zcGFjZXguY29tL3N0YXRpYy9pbWFnZXMvc2hhcmUuanBnIn0sImN1c3RvbV9jb25zdW1lcl9zZXR0aW5ncyI6eyJmZWF0dXJlX2ZsYWdfMSI6dHJ1ZSwidGF4X3JhdGVzIjpbeyJpZCI6IjYiLCJsYWJlbCI6IjYlIn0seyJpZCI6IjIxIiwibGFiZWwiOiIyMSUifV19LCJ0aGVtZSI6eyJmYXZpY29uIjoiaHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vcG9zdG1hbi9pbWFnZS91cGxvYWQvdF90ZWFtX2xvZ28vdjE2Mjk4ODY5NTgvdGVhbS9lM2JkN2RhZTRiODQ0MTliOWVjMGQzNGQ4NTVlMTE4MTZlOTRhY2QxYWY4OTRiMjNkYTQ0ZTkyNzA4ZTAzYTgxIiwicHJpbWFyeV9jb2xvciI6IiMyODZlZmEiLCJwcml2YWN5X3VybCI6Imh0dHBzOi8vY29tcGxpYW5jZS5hcGlkZWNrLmNvbS9wcml2YWN5LXBvbGljeSIsInNpZGVwYW5lbF9iYWNrZ3JvdW5kX2NvbG9yIjoiIzI4NmVmYSIsInNpZGVwYW5lbF90ZXh0X2NvbG9yIjoiI0ZGRkZGRiIsInRlcm1zX3VybCI6Imh0dHBzOi8vd3d3LnRlcm1zZmVlZC5jb20vdGVybXMtY29uZGl0aW9ucy85NTdjODVjMWIwODlhZTllMzIxOWM4M2VmZjY1Mzc3ZSIsInZhdWx0X25hbWUiOiJBcGlkZWNrIFZhdWx0In0sInNldHRpbmdzIjp7InVuaWZpZWRfYXBpcyI6WyJjcm0iLCJocmlzIiwicG9zIiwiZmlsZS1zdG9yYWdlIl0sImhpZGVfcmVzb3VyY2Vfc2V0dGluZ3MiOmZhbHNlLCJzYW5kYm94X21vZGUiOmZhbHNlLCJpc29sYXRpb25fbW9kZSI6ZmFsc2UsInNlc3Npb25fbGVuZ3RoIjoiMzBtIiwic2hvd19sb2dzIjp0cnVlLCJzaG93X3N1Z2dlc3Rpb25zIjpmYWxzZSwic2hvd19zaWRlYmFyIjp0cnVlLCJhdXRvX3JlZGlyZWN0IjpmYWxzZX0sImNvbnN1bWVyX2lkIjoidGVzdC1jb25zdW1lciIsImFwcGxpY2F0aW9uX2lkIjoiMjIyMiIsInNjb3BlcyI6W10sImlhdCI6MTcxMjg0MTkzNSwiZXhwIjoxNzEyODQzNzM1fQ.IO6kcAqYTCiCKWhNw6TCPkIF45YvQgw1wRY4rgMRr6A"
   />
 );