From 589f2b97655aadcbce52230d9651a403dded4e15 Mon Sep 17 00:00:00 2001 From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com> Date: Tue, 4 Oct 2022 11:45:33 +0100 Subject: [PATCH] fix: select widget search improvement (#17006) * fix: type issues in select widget * feat: add cypress tests * fix: select type issues in JSONform and Table Widget Co-authored-by: souma-ghosh Co-authored-by: Pawan Kumar --- .../Widgets/Select/select_Widget_Bug_spec.js | 41 +++++++++++++++++++ .../JSONFormWidget/fields/SelectField.tsx | 2 +- .../widgets/SelectWidget/component/index.tsx | 15 ++++--- .../src/widgets/SelectWidget/constants.ts | 5 +-- .../component/cellComponents/SelectCell.tsx | 2 +- .../widgets/TableWidgetV2/widget/index.tsx | 2 +- 6 files changed, 55 insertions(+), 12 deletions(-) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/select_Widget_Bug_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/select_Widget_Bug_spec.js index 042717f22f..1f1e614d97 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/select_Widget_Bug_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/select_Widget_Bug_spec.js @@ -234,4 +234,45 @@ describe("Select Widget Functionality", function() { ); cy.goToEditFromPublish(); }); + it("should check that filtering works well using numeric labels", () => { + cy.openPropertyPane("selectwidget"); + cy.updateCodeInput( + ".t--property-control-options", + `[ + { + "label": 1, + "value": "BLUE" + }, + { + "label": 2, + "value": "GREEN" + }, + { + "label": "3", + "value": "RED" + } + ]`, + ); + cy.dragAndDropToCanvas("textwidget", { x: 300, y: 80 }); + cy.openPropertyPane("textwidget"); + cy.testJsontext("text", "{{typeof Select1.selectedOptionLabel}}"); + // Filtering the option + cy.get(formWidgetsPage.selectWidget) + .find(widgetsPage.dropdownSingleSelect) + .click({ + force: true, + }); + cy.get(commonlocators.selectInputSearch).type("1"); + // confirm it only has a single child + cy.get(".select-popover-wrapper .menu-virtual-list") + .children() + .should("have.length", 1); + cy.get(commonlocators.singleSelectWidgetMenuItem).contains("1"); + cy.get(commonlocators.singleSelectWidgetMenuItem).click({ + force: true, + }); + cy.get(commonlocators.TextInside) + .first() + .should("have.text", "number"); + }); }); diff --git a/app/client/src/widgets/JSONFormWidget/fields/SelectField.tsx b/app/client/src/widgets/JSONFormWidget/fields/SelectField.tsx index 2a49117740..cc42ee3bfd 100644 --- a/app/client/src/widgets/JSONFormWidget/fields/SelectField.tsx +++ b/app/client/src/widgets/JSONFormWidget/fields/SelectField.tsx @@ -178,7 +178,7 @@ function SelectField({ placeholder={schemaItem.placeholderText} selectedIndex={selectedIndex} serverSideFiltering={schemaItem.serverSideFiltering} - value={options[selectedOptionIndex]?.value} + value={options[selectedOptionIndex]?.value?.toString()} widgetId={fieldClassName} width={10} /> diff --git a/app/client/src/widgets/SelectWidget/component/index.tsx b/app/client/src/widgets/SelectWidget/component/index.tsx index dbd71c5b5e..664b51b7ea 100644 --- a/app/client/src/widgets/SelectWidget/component/index.tsx +++ b/app/client/src/widgets/SelectWidget/component/index.tsx @@ -94,7 +94,10 @@ class SelectComponent extends React.Component< const filter = items.filter( (item) => - item.label?.toLowerCase().includes(query.toLowerCase()) || + item.label + ?.toString() + .toLowerCase() + .includes(query.toLowerCase()) || String(item.value) .toLowerCase() .includes(query.toLowerCase()), @@ -296,7 +299,7 @@ class SelectComponent extends React.Component< this.spanRef.current.parentElement.scrollHeight || this.spanRef.current.parentElement.offsetWidth < this.spanRef.current.parentElement.scrollWidth) - ? value + ? value.toString() : ""; return ( @@ -387,13 +390,13 @@ class SelectComponent extends React.Component< > @@ -426,8 +429,8 @@ export interface SelectComponentProps extends ComponentProps { serverSideFiltering: boolean; hasError?: boolean; onFilterChange: (text: string) => void; - value?: string; - label?: string; + value?: string | number; + label?: string | number; filterText?: string; borderRadius: string; boxShadow?: string; diff --git a/app/client/src/widgets/SelectWidget/constants.ts b/app/client/src/widgets/SelectWidget/constants.ts index cb469ed7e8..0486b4d2fe 100644 --- a/app/client/src/widgets/SelectWidget/constants.ts +++ b/app/client/src/widgets/SelectWidget/constants.ts @@ -1,10 +1,9 @@ import { Intent as BlueprintIntent } from "@blueprintjs/core"; import { IconName } from "@blueprintjs/icons"; -export type SelectionType = "SINGLE_SELECT" | "MULTI_SELECT"; export interface DropdownOption { - label?: string; - value?: string; + label?: string | number; + value?: string | number; icon?: IconName; subText?: string; id?: string; diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx index 84d5a198ed..fae9b8202a 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/SelectCell.tsx @@ -54,7 +54,7 @@ type SelectProps = { action?: string, ) => void; onItemSelect: ( - value: string, + value: string | number, rowIndex: number, column: string, action?: string, diff --git a/app/client/src/widgets/TableWidgetV2/widget/index.tsx b/app/client/src/widgets/TableWidgetV2/widget/index.tsx index fbcb41fe87..79ea45c46b 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/index.tsx +++ b/app/client/src/widgets/TableWidgetV2/widget/index.tsx @@ -1841,7 +1841,7 @@ class TableWidgetV2 extends BaseWidget { }; onOptionSelect = ( - value: string, + value: string | number, rowIndex: number, column: string, action?: string,