From c4ca2bb1dac59aaf6d641c9bf518e168354295bb Mon Sep 17 00:00:00 2001 From: Mike Fortman Date: Tue, 3 Jun 2025 16:19:01 -0500 Subject: [PATCH] fix: only allow custom vals and options to be in the options list (#8356) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * only allow customvals and options to be in the options list * ✨ (general-bugs-dropdown-select-not-in-list.spec.ts): add additional test cases to cover dropdown selection functionality and ensure correct behavior in the frontend application --------- Co-authored-by: cristhianzl --- .../core/dropdownComponent/index.tsx | 4 +- ...l-bugs-dropdown-select-not-in-list.spec.ts | 77 ++++++++++++++++++- 2 files changed, 78 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/components/core/dropdownComponent/index.tsx b/src/frontend/src/components/core/dropdownComponent/index.tsx index 9312719fd..c8d35112f 100644 --- a/src/frontend/src/components/core/dropdownComponent/index.tsx +++ b/src/frontend/src/components/core/dropdownComponent/index.tsx @@ -122,7 +122,7 @@ export default function Dropdown({ // If search is cleared, show all options // Preserve any custom values that were in filteredOptions const customValuesInFiltered = filteredOptions.filter( - (option) => !validOptions.includes(option), + (option) => !validOptions.includes(option) && option === customValue, ); setFilteredOptions([...validOptions, ...customValuesInFiltered]); setFilteredMetadata(optionsMetaData); @@ -222,7 +222,7 @@ export default function Dropdown({ if (open) { // Check if filteredOptions contains any custom values not in validOptions const customValuesInFiltered = filteredOptions.filter( - (option) => !validOptions.includes(option), + (option) => !validOptions.includes(option) && option === customValue, ); // If there are custom values, preserve them when resetting filtered options diff --git a/src/frontend/tests/extended/regression/general-bugs-dropdown-select-not-in-list.spec.ts b/src/frontend/tests/extended/regression/general-bugs-dropdown-select-not-in-list.spec.ts index 6017fe615..0ab243ba8 100644 --- a/src/frontend/tests/extended/regression/general-bugs-dropdown-select-not-in-list.spec.ts +++ b/src/frontend/tests/extended/regression/general-bugs-dropdown-select-not-in-list.spec.ts @@ -36,9 +36,84 @@ test( await page.waitForTimeout(500); - const value = await page + let value = await page .getByTestId("value-dropdown-dropdown_str_model_name") .textContent(); expect(value?.trim()).toBe("this is a test langflow"); + + await page.getByTestId("generic-node-title-arrangement").click(); + await page.keyboard.press("Delete"); + + await page.getByTestId("sidebar-search-input").fill("agent"); + + await page.getByTestId("agentsAgent").hover(); + await page.getByTestId("add-component-button-agent").click(); + + await page.getByTestId("fit_view").click(); + + await page.getByTestId("dropdown_str_model_name").click(); + await page.getByTestId("dropdown_search_input").click(); + await page + .getByTestId("dropdown_search_input") + .fill("this is a test langflow"); + await page.keyboard.press("Enter"); + + await page.waitForTimeout(500); + + value = await page + .getByTestId("value-dropdown-dropdown_str_model_name") + .textContent(); + expect(value?.trim()).toBe("this is a test langflow"); + + await page.getByTestId("dropdown_str_model_name").click(); + + expect(await page.getByText("ollama").count()).toBe(0); + expect(await page.getByText("claude").count()).toBe(0); + expect(await page.getByText("this is a test langflow").count()).toBe(2); + expect(await page.getByText("gpt").count()).toBeGreaterThanOrEqual(1); + + await page.waitForTimeout(500); + + await page.getByTestId("value-dropdown-dropdown_str_agent_llm").click(); + + await page.waitForTimeout(500); + + await page.getByText("Anthropic").click(); + + await page.waitForTimeout(500); + + await page.getByTestId("fit_view").click(); + + await page.getByTestId("dropdown_str_model_name").click(); + await page.getByTestId("dropdown_search_input").click(); + + expect(await page.getByText("llama").count()).toBe(0); + expect(await page.getByText("claude").count()).toBeGreaterThanOrEqual(1); + expect( + await page.getByText("this is a test langflow", { exact: true }).count(), + ).toBe(0); + expect(await page.getByText("gpt").count()).toBe(0); + + await page.waitForTimeout(500); + + await page.getByTestId("value-dropdown-dropdown_str_agent_llm").click(); + + await page.waitForTimeout(500); + + await page.getByText("Groq").click(); + + await page.waitForTimeout(500); + + await page.getByTestId("fit_view").click(); + + await page.getByTestId("dropdown_str_model_name").click(); + await page.getByTestId("dropdown_search_input").click(); + + expect(await page.getByText("llama").count()).toBeGreaterThanOrEqual(0); + expect(await page.getByText("claude").count()).toBe(0); + expect( + await page.getByText("this is a test langflow", { exact: true }).count(), + ).toBe(0); + expect(await page.getByText("gpt").count()).toBe(0); }, );