Fix creating duplicates with trailing spaces when also filtering.

A previous fix (b19f6b9) addressed the issue of
not using the trimmed input when checking options
for an existing match. However, it did not account
for the options potentially being filtered first
(via 'filterable') based on the untrimmed input.
This led to no options available to check
existence against in 'creatable' and so a
duplicate option was still created.

Input values are now trimmed consistently in the
create options logic to ensure correct behavior
when filtering and determining existence.

Add a corresponding unit test to validate.

Author: martinpengellyphillips

src/create-options.test.tsx

@@ -0,0 +1,43 @@
+
+import { describe, it, expect } from "vitest";
+import { createOptions } from "./create-options";
+
+describe("createOptions", () => {
+  it("should not offer to create a duplicate option when input has trailing space", () => {
+    const { options } = createOptions(["Apple", "Banana"], {
+      createable: true,
+      filterable: true,
+      format: (value, type, meta) => {
+        if (type === "label") {
+          return `${meta.prefix || ""}${value}`;
+        }
+        return value as any;
+      },
+    });
+
+    // Case 1: Exact match "Apple"
+    const results1 = options("Apple");
+    // Should pass filter and be present
+    expect(results1.some((o) => o.text === "Apple")).toBe(true);
+    // Should NOT offer to "Create Apple"
+    expect(
+      results1.some((o) => (o.label as string).includes("Create"))
+    ).toBe(false);
+
+    // Case 2: Trailing space "Apple "
+    const results2 = options("Apple ");
+
+    // If the bug exists:
+    // 1. "Apple" is filtered out (because "Apple " != "Apple").
+    // 2. createable sees no "Apple", so it adds "Create Apple".
+    // 3. results2 contains "Create Apple".
+
+    // Check if we have the "Create Apple" option
+    // We Expect NOT to have it.
+    const hasCreateOption = results2.some((o) =>
+      (o.label as string).includes("Create")
+    );
+
+    expect(hasCreateOption).toBe(false);
+  });
+});

src/create-options.tsx

@@ -104,6 +104,7 @@ const createOptions = (
     config.disable(resolveValue(value));
 
   const options = (inputValue: string) => {
+    const trimmedValue = inputValue.trim();
     const initialValues =
       typeof values === "function" ? values(inputValue) : values;
 
@@ -116,11 +117,11 @@ const createOptions = (
       };
     });
 
-    if (config.filterable && inputValue) {
+    if (config.filterable && trimmedValue) {
       if (typeof config.filterable === "function") {
-        createdOptions = config.filterable(inputValue, createdOptions);
+        createdOptions = config.filterable(trimmedValue, createdOptions);
       } else {
-        createdOptions = fuzzySort(inputValue, createdOptions, "text").map(
+        createdOptions = fuzzySort(trimmedValue, createdOptions, "text").map(
           (result) => ({
             ...result.item,
             label: format(result.item.value, "label", {
@@ -132,7 +133,6 @@ const createOptions = (
     }
 
     if (config.createable !== undefined) {
-      const trimmedValue = inputValue.trim();
       const exists = createdOptions.some((option) =>
         areEqualIgnoringCase(trimmedValue, option.text),
       );
@@ -210,4 +210,4 @@ export type {
   CreateOptionsFormatFunction,
   CreateOptionsFilterableFunction,
   CreateOptionsCreateableFunction,
-};
+};