fix: dropdown not closing is fixed (#15058)

* fix: Dropdown issues

* CR fix

Co-authored-by: balajisoundar <balaji@appsmith.com>

app/client/package.json

@@ -93,7 +93,7 @@
     "prismjs": "^1.27.0",
     "punycode": "^2.1.1",
     "rc-pagination": "^3.1.3",
-    "rc-select": "^12.1.10",
+    "rc-select": "13.2.1",
     "rc-tree-select": "^4.4.0-alpha.2",
     "re-reselect": "^3.4.0",
     "react": "^16.12.0",

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

@@ -141,6 +141,7 @@ function MultiTreeSelectComponent({
   const {
     BackDrop,
     getPopupContainer,
+    isOpen,
     onKeyDown,
     onOpen,
     selectRef,
@@ -284,6 +285,7 @@ function MultiTreeSelectComponent({
           onChange={onChange}
           onClear={onClear}
           onDropdownVisibleChange={onDropdownVisibleChange}
+          open={isOpen}
           placeholder={placeholder}
           ref={selectRef}
           removeIcon={

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

@@ -113,6 +113,7 @@ function MultiSelectComponent({
   const {
     BackDrop,
     getPopupContainer,
+    isOpen,
     onKeyDown,
     onOpen,
     selectRef,
@@ -346,6 +347,7 @@ function MultiSelectComponent({
           onChange={onChange}
           onDropdownVisibleChange={onDropdownVisibleChange}
           onFocus={onFocus}
+          open={isOpen}
           options={filteredOptions}
           placeholder={placeholder || "select option(s)"}
           ref={selectRef}

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

@@ -136,6 +136,7 @@ function SingleSelectTreeComponent({
   const {
     BackDrop,
     getPopupContainer,
+    isOpen,
     onKeyDown,
     onOpen,
     selectRef,
@@ -283,6 +284,7 @@ function SingleSelectTreeComponent({
           onChange={onSelectionChange}
           onClear={onClear}
           onDropdownVisibleChange={onDropdownVisibleChange}
+          open={isOpen}
           placeholder={placeholder}
           ref={selectRef}
           searchValue={filter}

app/client/src/widgets/useDropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { getMainCanvas } from "./WidgetUtils";
 import styled from "styled-components";
 import Select from "rc-select";
@@ -22,12 +22,14 @@ const FOCUS_TIMEOUT = 500;
 
 // TODO: Refactor More functionalities in MultiSelect, MultiTreeSelect and TreeSelect Components
 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 closeBackDrop = useCallback(() => {
-    if (selectRef.current) {
-      selectRef.current.blur();
+  useEffect(() => {
+    if (!popupContainer.current) {
+      popupContainer.current = getMainCanvas();
     }
   }, []);
 
@@ -48,6 +50,7 @@ const useDropdown = ({ inputRef, renderMode }: useDropdownProps) => {
   // When Dropdown is opened disable scrolling within the app except the list of options
   const onOpen = useCallback(
     (open: boolean) => {
+      setIsOpen(open);
       if (open) {
         setTimeout(() => inputRef.current?.focus(), FOCUS_TIMEOUT);
         // for more context, the Element we attach to in view mode doesn't have an overflow style, so this only applies to edit mode.
@@ -58,15 +61,24 @@ const useDropdown = ({ inputRef, renderMode }: useDropdownProps) => {
         if (popupContainer.current && renderMode === RenderModes.CANVAS) {
           popupContainer.current.style.overflowY = "auto";
         }
+        selectRef.current?.blur();
       }
     },
     [renderMode],
   );
 
+  const closeBackDrop = useCallback(() => {
+    if (selectRef.current) {
+      selectRef.current.blur();
+      onOpen(false);
+    }
+  }, [onOpen]);
+
   return {
     BackDrop,
     getPopupContainer,
     onOpen,
+    isOpen,
     selectRef,
     onKeyDown,
   };

app/client/yarn.lock

@@ -12749,19 +12749,7 @@ rc-resize-observer@^1.0.0:
     rc-util "^5.0.0"
     resize-observer-polyfill "^1.5.1"
 
-rc-select@^12.1.10:
-  version "12.1.13"
-  resolved "https://registry.npmjs.org/rc-select/-/rc-select-12.1.13.tgz"
-  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-virtual-list "^3.2.0"
-
-rc-select@~13.2.1:
+rc-select@13.2.1, rc-select@~13.2.1:
   version "13.2.1"
   resolved "https://registry.npmjs.org/rc-select/-/rc-select-13.2.1.tgz"
   integrity sha512-L2cJFAjVEeDiNVa/dlOVKE79OUb0J7sUBvWN3Viav3XHcjvv9Ovn4D8J9QhBSlDXeGuczZ81CZI3BbdHD25+Gg==