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 <souma@appsmith.com>
Co-authored-by: Pawan Kumar <pawan.stardust@gmail.com>

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");
+  });
 });

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}
         />

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<
           >
             <SelectButton
               disabled={disabled}
-              displayText={value}
+              displayText={value.toString()}
               handleCancelClick={this.handleCancelClick}
               hideCancelIcon={this.props.hideCancelIcon}
               spanRef={this.spanRef}
               togglePopoverVisibility={this.togglePopoverVisibility}
               tooltipText={tooltipText}
-              value={this.props.value}
+              value={this.props.value?.toString()}
             />
           </StyledSingleDropDown>
         </StyledControlGroup>
@@ -426,8 +429,8 @@ export interface SelectComponentProps extends ComponentProps {
   serverSideFiltering: boolean;
   hasError?: boolean;
   onFilterChange: (text: string) => void;
-  value?: string;
+  value?: string | number;
-  label?: string;
+  label?: string | number;
   filterText?: string;
   borderRadius: string;
   boxShadow?: string;

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;
+  label?: string | number;
-  value?: string;
+  value?: string | number;
   icon?: IconName;
   subText?: string;
   id?: string;

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,

app/client/src/widgets/TableWidgetV2/widget/index.tsx

@@ -1841,7 +1841,7 @@ class TableWidgetV2 extends BaseWidget<TableWidgetProps, WidgetState> {
   };
 
   onOptionSelect = (
-    value: string,
+    value: string | number,
     rowIndex: number,
     column: string,
     action?: string,