fix: search functionality in tree select (#16073)

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Multiselect/Multi_Select_Tree_spec.js

@@ -101,6 +101,18 @@ describe("MultiSelectTree Widget Functionality", function() {
     ).should("be.visible");
     cy.get(publish.backToEditor).click();
   });
+
+  it("7. To Check Option Not Found", function() {
+    cy.get(formWidgetsPage.treeSelectInput)
+      .first()
+      .click({ force: true });
+    cy.get(formWidgetsPage.multiTreeSelectFilterInput)
+      .click()
+      .type("ABCD");
+    cy.get(".tree-multiselect-dropdown .rc-tree-select-empty").contains(
+      "No Results Found",
+    );
+  });
 });
 afterEach(() => {
   // put your clean up code if any

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Select/Single_Select_Tree_spec.js

@@ -99,6 +99,18 @@ describe("Single Select Widget Functionality", function() {
     ).should("be.visible");
     cy.get(publish.backToEditor).click();
   });
+
+  it("7. To Check Option Not Found", function() {
+    cy.get(formWidgetsPage.treeSelectInput)
+      .last()
+      .click({ force: true });
+    cy.get(formWidgetsPage.treeSelectFilterInput)
+      .click()
+      .type("ABCD");
+    cy.get(".tree-select-dropdown .rc-tree-select-empty").contains(
+      "No Results Found",
+    );
+  });
 });
 afterEach(() => {
   // put your clean up code if any

app/client/package.json

@@ -93,8 +93,8 @@
     "prismjs": "^1.27.0",
     "punycode": "^2.1.1",
     "rc-pagination": "^3.1.3",
-    "rc-select": "13.2.1",
+    "rc-select": "^14.1.9",
-    "rc-tree-select": "^4.4.0-alpha.2",
+    "rc-tree-select": "^5.4.0",
     "re-reselect": "^3.4.0",
     "react": "^16.12.0",
     "react-base-table": "^1.9.1",

app/client/src/widgets/JSONFormWidget/fields/MultiSelectField.tsx

@@ -1,9 +1,6 @@
 import React, { useCallback, useContext, useMemo, useRef } from "react";
 import styled from "styled-components";
-import {
+import { LabelInValueType, DraftValueType } from "rc-select/lib/Select";
-  DefaultValueType,
-  LabelValueType,
-} from "rc-select/lib/interface/generator";
 import { useController } from "react-hook-form";
 import { isNil } from "lodash";
 
@@ -78,8 +75,8 @@ const DEFAULT_DROPDOWN_STYLES = {
 };
 
 const fieldValuesToComponentValues = (
-  values: LabelValueType["value"][],
+  values: LabelInValueType["value"][],
-  options: LabelValueType[] = [],
+  options: LabelInValueType[] = [],
 ) => {
   return values.map((value) => {
     const option = options.find((option) => option.value === value);
@@ -88,8 +85,9 @@ const fieldValuesToComponentValues = (
   });
 };
 
-const componentValuesToFieldValues = (componentValues: LabelValueType[] = []) =>
+const componentValuesToFieldValues = (
-  componentValues.map(({ value }) => value);
+  componentValues: LabelInValueType[] = [],
+) => componentValues.map(({ value }) => value);
 
 function MultiSelectField({
   fieldClassName,
@@ -113,7 +111,7 @@ function MultiSelectField({
     name,
   });
 
-  const inputValue: LabelValueType["value"][] =
+  const inputValue: LabelInValueType["value"][] =
     (Array.isArray(value) && value) || [];
 
   const { onBlurHandler, onFocusHandler } = useEvents<HTMLInputElement>({
@@ -135,7 +133,7 @@ function MultiSelectField({
   });
 
   const fieldDefaultValue = useMemo(() => {
-    const values: LabelValueType["value"][] | LabelValueType[] = (() => {
+    const values: LabelInValueType["value"][] | LabelInValueType[] = (() => {
       if (!isNil(passedDefaultValue) && validateOptions(passedDefaultValue)) {
         return passedDefaultValue;
       }
@@ -151,9 +149,9 @@ function MultiSelectField({
     })();
 
     if (values.length && isPrimitive(values[0])) {
-      return values as LabelValueType["value"][];
+      return values as LabelInValueType["value"][];
     } else {
-      return componentValuesToFieldValues(values as LabelValueType[]);
+      return componentValuesToFieldValues(values as LabelInValueType[]);
     }
   }, [schemaItem.defaultValue, passedDefaultValue]);
 
@@ -180,8 +178,8 @@ function MultiSelectField({
   );
 
   const onOptionChange = useCallback(
-    (values: DefaultValueType) => {
+    (values: DraftValueType) => {
-      onChange(componentValuesToFieldValues(values as LabelValueType[]));
+      onChange(componentValuesToFieldValues(values as LabelInValueType[]));
 
       if (schemaItem.onOptionChange && executeAction) {
         executeAction({

app/client/src/widgets/JSONFormWidget/helper.ts

@@ -1,5 +1,5 @@
 import { isNil, isPlainObject, merge } from "lodash";
-import { LabelValueType } from "rc-select/lib/interface/generator";
+import { LabelInValueType } from "rc-select/lib/Select";
 
 import {
   isDynamicValue,
@@ -287,7 +287,7 @@ export function isPrimitive(val: unknown): val is number | string | boolean {
 
 export const validateOptions = (
   values: unknown,
-): values is LabelValueType["value"][] | LabelValueType[] => {
+): values is LabelInValueType["value"][] | LabelInValueType[] => {
   if (!Array.isArray(values)) return false;
 
   let hasPrimitive = false;

app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx

@@ -18,6 +18,8 @@ import "rc-tree-select/assets/index.less";
 import { DefaultValueType } from "rc-tree-select/lib/interface";
 import { TreeNodeProps } from "rc-tree-select/lib/TreeNode";
 import { CheckedStrategy } from "rc-tree-select/lib/utils/strategyUtil";
+import { DefaultOptionType } from "rc-tree-select/lib/TreeSelect";
+import styled from "styled-components";
 import { RenderMode, TextSize } from "constants/WidgetConstants";
 import { Alignment, Button, Classes, InputGroup } from "@blueprintjs/core";
 import { labelMargin, WidgetContainerDiff } from "widgets/WidgetUtils";
@@ -31,12 +33,7 @@ export interface TreeSelectProps
   extends Required<
     Pick<
       SelectProps,
-      | "disabled"
+      "disabled" | "placeholder" | "loading" | "dropdownStyle" | "allowClear"
-      | "placeholder"
-      | "loading"
-      | "dropdownStyle"
-      | "allowClear"
-      | "options"
     >
   > {
   value?: DefaultValueType;
@@ -61,8 +58,13 @@ export interface TreeSelectProps
   filterText?: string;
   isFilterable: boolean;
   renderMode?: RenderMode;
+  options?: DefaultOptionType[];
 }
 
+export const NoDataFoundContainer = styled.div`
+  text-align: center;
+`;
+
 const getSvg = (expanded: boolean) => (
   <i
     style={{
@@ -281,7 +283,9 @@ function MultiTreeSelectComponent({
           maxTagCount={"responsive"}
           maxTagPlaceholder={(e) => `+${e.length} more`}
           multiple
-          notFoundContent="No Results Found"
+          notFoundContent={
+            <NoDataFoundContainer>No Results Found</NoDataFoundContainer>
+          }
           onChange={onChange}
           onClear={onClear}
           onDropdownVisibleChange={onDropdownVisibleChange}

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

@@ -8,7 +8,7 @@ import {
   ValidationTypes,
 } from "constants/WidgetValidation";
 import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
-import { DefaultValueType } from "rc-select/lib/interface/generator";
+import { DefaultValueType } from "rc-tree-select/lib/interface";
 import { Layers } from "constants/Layers";
 import { CheckedStrategy } from "rc-tree-select/lib/utils/strategyUtil";
 import { GRID_DENSITY_MIGRATION_V1, MinimumPopupRows } from "widgets/constants";

app/client/src/widgets/MultiSelectWidget/component/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React, { useEffect, useState, useCallback, useRef } from "react";
 import Select, { SelectProps } from "rc-select";
-import { DefaultValueType } from "rc-select/lib/interface/generator";
+import { DraftValueType } from "rc-select/lib/Select";
 import {
   DropdownStyles,
   MultiSelectContainer,
@@ -34,7 +34,7 @@ export interface MultiSelectProps
   > {
   mode?: "multiple" | "tags";
   value: string[];
-  onChange: (value: DefaultValueType) => void;
+  onChange: (value: DraftValueType) => void;
   serverSideFiltering: boolean;
   onFilterChange: (text: string) => void;
   dropDownWidth: number;
@@ -114,7 +114,7 @@ function MultiSelectComponent({
 
   const handleSelectAll = () => {
     if (!isSelectAll) {
-      const allOption: string[] = options.map((option) => option.value);
+      const allOption = options.map((option) => option.value) as string[];
       onChange(allOption);
       return;
     }

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

@@ -10,12 +10,12 @@ import {
 
 import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
 import MultiSelectComponent from "../component";
-import { DefaultValueType } from "rc-select/lib/interface/generator";
 import { Layers } from "constants/Layers";
 import { AutocompleteDataType } from "utils/autocomplete/TernServer";
 import { MinimumPopupRows, GRID_DENSITY_MIGRATION_V1 } from "widgets/constants";
 import { LabelPosition } from "components/constants";
 import { Alignment } from "@blueprintjs/core";
+import { DraftValueType } from "rc-select/lib/Select";
 
 function defaultOptionValueValidation(value: unknown): ValidationResponse {
   let values: string[] = [];
@@ -456,7 +456,7 @@ class MultiSelectWidget extends BaseWidget<
     );
   }
 
-  onOptionChange = (value: DefaultValueType) => {
+  onOptionChange = (value: DraftValueType) => {
     this.props.updateWidgetMetaProperty("selectedOptionValueArr", value, {
       triggerPropertyName: "onOptionChange",
       dynamicString: this.props.onOptionChange,

app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx

@@ -8,10 +8,7 @@ import React, {
   useMemo,
 } from "react";
 import Select, { SelectProps } from "rc-select";
-import {
+import { DraftValueType, LabelInValueType } from "rc-select/lib/Select";
-  DefaultValueType,
-  LabelValueType,
-} from "rc-select/lib/interface/generator";
 import MenuItemCheckBox, {
   DropdownStyles,
   MultiSelectContainer,
@@ -40,8 +37,8 @@ export interface MultiSelectProps
     >
   > {
   mode?: "multiple" | "tags";
-  value: LabelValueType[];
+  value: LabelInValueType[];
-  onChange: (value: DefaultValueType) => void;
+  onChange: (value: DraftValueType) => void;
   serverSideFiltering: boolean;
   onFilterChange: (text: string) => void;
   dropDownWidth: number;
@@ -178,9 +175,9 @@ function MultiSelectComponent({
   const handleSelectAll = () => {
     if (!isSelectAll) {
       // Get all options
-      const allOption: LabelValueType[] = filteredOptions.map(
+      const allOption: LabelInValueType[] = filteredOptions.map(
         ({ label, value }) => ({
-          value,
+          value: value || "",
           label,
         }),
       );

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

@@ -17,10 +17,7 @@ import {
 } from "constants/WidgetValidation";
 import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
 import MultiSelectComponent from "../component";
-import {
+import { DraftValueType, LabelInValueType } from "rc-select/lib/Select";
-  DefaultValueType,
-  LabelValueType,
-} from "rc-select/lib/interface/generator";
 import { Layers } from "constants/Layers";
 import { MinimumPopupRows, GRID_DENSITY_MIGRATION_V1 } from "widgets/constants";
 import { LabelPosition } from "components/constants";
@@ -1040,7 +1037,7 @@ class MultiSelectWidget extends BaseWidget<
     );
   }
 
-  onOptionChange = (value: DefaultValueType) => {
+  onOptionChange = (value: DraftValueType) => {
     this.props.updateWidgetMetaProperty("selectedOptions", value, {
       triggerPropertyName: "onOptionChange",
       dynamicString: this.props.onOptionChange,
@@ -1054,7 +1051,7 @@ class MultiSelectWidget extends BaseWidget<
   };
 
   // { label , value } is needed in the widget
-  mergeLabelAndValue = (): LabelValueType[] => {
+  mergeLabelAndValue = (): LabelInValueType[] => {
     const labels = [...this.props.selectedOptionLabels];
     const values = [...this.props.selectedOptionValues];
     return values.map((value, index) => ({
@@ -1100,7 +1097,7 @@ export interface MultiSelectWidgetProps extends WidgetProps {
   defaultOptionValue: string[] | OptionValue[];
   isRequired: boolean;
   isLoading: boolean;
-  selectedOptions: LabelValueType[];
+  selectedOptions: LabelInValueType[];
   filterText: string;
   selectedOptionValues: string[];
   selectedOptionLabels: string[];

app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx

@@ -17,6 +17,8 @@ import {
 import "rc-tree-select/assets/index.less";
 import { DefaultValueType } from "rc-tree-select/lib/interface";
 import { TreeNodeProps } from "rc-tree-select/lib/TreeNode";
+import { DefaultOptionType } from "rc-tree-select/lib/TreeSelect";
+import styled from "styled-components";
 import { RenderMode, TextSize } from "constants/WidgetConstants";
 import { Alignment, Button, Classes, InputGroup } from "@blueprintjs/core";
 import { labelMargin, WidgetContainerDiff } from "widgets/WidgetUtils";
@@ -30,12 +32,7 @@ export interface TreeSelectProps
   extends Required<
     Pick<
       SelectProps,
-      | "disabled"
+      "disabled" | "placeholder" | "loading" | "dropdownStyle" | "allowClear"
-      | "placeholder"
-      | "loading"
-      | "dropdownStyle"
-      | "allowClear"
-      | "options"
     >
   > {
   value?: DefaultValueType;
@@ -59,8 +56,13 @@ export interface TreeSelectProps
   filterText?: string;
   isFilterable: boolean;
   renderMode?: RenderMode;
+  options?: DefaultOptionType[];
 }
 
+export const NoDataFoundContainer = styled.div`
+  text-align: center;
+`;
+
 const getSvg = (expanded: boolean) => (
   <i
     style={{
@@ -281,7 +283,9 @@ function SingleSelectTreeComponent({
           loading={loading}
           maxTagCount={"responsive"}
           maxTagPlaceholder={(e) => `+${e.length} more`}
-          notFoundContent="No Results Found"
+          notFoundContent={
+            <NoDataFoundContainer>No Results Found</NoDataFoundContainer>
+          }
           onChange={onSelectionChange}
           onClear={onClear}
           onDropdownVisibleChange={onDropdownVisibleChange}

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

@@ -8,7 +8,7 @@ import {
   ValidationTypes,
 } from "constants/WidgetValidation";
 import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory";
-import { DefaultValueType } from "rc-select/lib/interface/generator";
+import { DefaultValueType } from "rc-tree-select/lib/interface";
 import { Layers } from "constants/Layers";
 import { isString } from "../../../utils/helpers";
 import { AutocompleteDataType } from "utils/autocomplete/TernServer";

app/client/src/widgets/useDropdown.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { getMainCanvas } from "./WidgetUtils";
 import styled from "styled-components";
-import Select from "rc-select";
+import { BaseSelectRef } from "rc-select";
-import { LabelValueType } from "rc-select/lib/interface/generator";
 import { RenderMode, RenderModes } from "constants/WidgetConstants";
 
 const BackDropContainer = styled.div`
@@ -25,7 +24,7 @@ const useDropdown = ({ inputRef, renderMode }: useDropdownProps) => {
   // This is to make the dropdown controlled
   const [isOpen, setIsOpen] = useState(false);
   const popupContainer = useRef<HTMLElement>(getMainCanvas());
-  const selectRef = useRef<Select<LabelValueType[]> | null>(null);
+  const selectRef = useRef<BaseSelectRef | null>(null);
 
   useEffect(() => {
     if (!popupContainer.current) {

app/client/yarn.lock

@@ -1262,7 +1262,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.2.0", "@babel/runtime@^7.7.6":
+"@babel/runtime@^7.18.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.7.6":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
   integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
@@ -12365,40 +12365,40 @@ rc-resize-observer@^1.0.0:
     rc-util "^5.0.0"
     resize-observer-polyfill "^1.5.1"
 
-rc-select@13.2.1, rc-select@~13.2.1:
+rc-select@^14.1.9, rc-select@~14.1.0:
-  version "13.2.1"
+  version "14.1.9"
-  resolved "https://registry.npmjs.org/rc-select/-/rc-select-13.2.1.tgz"
+  resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-14.1.9.tgz#9c9eceff00920ad8a0a53b77b76afc177ffe5ab4"
-  integrity sha512-L2cJFAjVEeDiNVa/dlOVKE79OUb0J7sUBvWN3Viav3XHcjvv9Ovn4D8J9QhBSlDXeGuczZ81CZI3BbdHD25+Gg==
+  integrity sha512-DK01+Q7oCWr5jVPiEp/BTQ8xCB4rI4LfXzZtSmBWJhOMuibyZD1Vlz/DlVKCUFmtBM4SzG4/SltGHoGlcbCqiw==
   dependencies:
     "@babel/runtime" "^7.10.1"
     classnames "2.x"
     rc-motion "^2.0.1"
     rc-overflow "^1.0.0"
     rc-trigger "^5.0.4"
-    rc-util "^5.9.8"
+    rc-util "^5.16.1"
     rc-virtual-list "^3.2.0"
 
-rc-tree-select@^4.4.0-alpha.2:
+rc-tree-select@^5.4.0:
-  version "4.8.0"
+  version "5.4.0"
-  resolved "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-4.8.0.tgz"
+  resolved "https://registry.yarnpkg.com/rc-tree-select/-/rc-tree-select-5.4.0.tgz#c94b961aca68689f5ee3a43e33881cf693d195ef"
-  integrity sha512-evuVIF7GHCGDdvISdBWl4ZYmG/8foof/RDtzCu/WFLA1tFKZD77RRC3khEsjh4WgsB0vllLe7j+ODJ7jHRcDRQ==
+  integrity sha512-reRbOqC7Ic/nQocJAJeCl4n6nJUY3NoqiwRXKvhjgZJU7NGr9vIccXEsY+Lghkw5UMpPoxGsIJB0jiAvM18XYA==
   dependencies:
     "@babel/runtime" "^7.10.1"
     classnames "2.x"
-    rc-select "~13.2.1"
+    rc-select "~14.1.0"
-    rc-tree "~5.3.0"
+    rc-tree "~5.6.1"
-    rc-util "^5.7.0"
+    rc-util "^5.16.1"
 
-rc-tree@~5.3.0:
+rc-tree@~5.6.1:
-  version "5.3.8"
+  version "5.6.6"
-  resolved "https://registry.npmjs.org/rc-tree/-/rc-tree-5.3.8.tgz"
+  resolved "https://registry.yarnpkg.com/rc-tree/-/rc-tree-5.6.6.tgz#c04253d8f8345ec52fc196dec2be06c7e708125b"
-  integrity sha512-YuobEryPymqPmHFUOvsoOrYdm24psaj0CrGEUuDUQUeG/nNcTGw6FA2YmF4NsEaNBvNSJUSzwfZnFHrKa/xv0A==
+  integrity sha512-HI/q4D4AHOp48OZcBUvJFWkI5OfnZivvGYI0xzI0dy0Mita2KcTGZv7/Yl6Aq3bL3od3x5AqAXq/7qxR3x4Kkg==
   dependencies:
     "@babel/runtime" "^7.10.1"
     classnames "2.x"
     rc-motion "^2.0.1"
     rc-util "^5.16.1"
-    rc-virtual-list "^3.4.1"
+    rc-virtual-list "^3.4.8"
 
 rc-trigger@^5.0.4:
   version "5.2.9"
@@ -12410,7 +12410,7 @@ rc-trigger@^5.0.4:
     rc-motion "^2.0.0"
     rc-util "^5.5.0"
 
-rc-util@^5.0.0, rc-util@^5.0.7, rc-util@^5.2.1, rc-util@^5.3.0, rc-util@^5.5.0, rc-util@^5.5.1, rc-util@^5.9.8:
+rc-util@^5.0.0, rc-util@^5.0.7, rc-util@^5.2.1, rc-util@^5.3.0, rc-util@^5.5.0, rc-util@^5.5.1:
   version "5.13.2"
   resolved "https://registry.npmjs.org/rc-util/-/rc-util-5.13.2.tgz"
   dependencies:
@@ -12418,7 +12418,16 @@ rc-util@^5.0.0, rc-util@^5.0.7, rc-util@^5.2.1, rc-util@^5.3.0, rc-util@^5.5.0,
     react-is "^16.12.0"
     shallowequal "^1.1.0"
 
-rc-util@^5.16.1, rc-util@^5.7.0:
+rc-util@^5.15.0:
+  version "5.23.0"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.23.0.tgz#a583b1ec3e1832a80eced7a700a494af0b590743"
+  integrity sha512-lgm6diJ/pLgyfoZY59Vz7sW4mSoQCgozqbBye9IJ7/mb5w5h4T7h+i2JpXAx/UBQxscBZe68q0sP7EW+qfkKUg==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    react-is "^16.12.0"
+    shallowequal "^1.1.0"
+
+rc-util@^5.16.1:
   version "5.18.1"
   resolved "https://registry.npmjs.org/rc-util/-/rc-util-5.18.1.tgz"
   integrity sha512-24xaSrMZUEKh1+suDOtJWfPe9E6YrwryViZcoPO0miJTKzP4qhUlV5AAlKQ82AJilz/AOHfi3l6HoX8qa1ye8w==
@@ -12435,14 +12444,14 @@ rc-virtual-list@^3.2.0:
     rc-resize-observer "^1.0.0"
     rc-util "^5.0.7"
 
-rc-virtual-list@^3.4.1:
+rc-virtual-list@^3.4.8:
-  version "3.4.2"
+  version "3.4.8"
-  resolved "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.4.2.tgz"
+  resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-3.4.8.tgz#c24c10c6940546b7e2a5e9809402c6716adfd26c"
-  integrity sha512-OyVrrPvvFcHvV0ssz5EDZ+7Rf5qLat/+mmujjchNw5FfbJWNDwkpQ99EcVE6+FtNRmX9wFa1LGNpZLUTvp/4GQ==
+  integrity sha512-qSN+Rv4i/E7RCTvTMr1uZo7f3crJJg/5DekoCagydo9zsXrxj07zsFSxqizqW+ldGA16lwa8So/bIbV9Ofjddg==
   dependencies:
     classnames "^2.2.6"
     rc-resize-observer "^1.0.0"
-    rc-util "^5.0.7"
+    rc-util "^5.15.0"
 
 re-reselect@^3.4.0:
   version "3.4.0"