From 71ea0ac5236e0c829b4e924efd7995ba62fa5cdb Mon Sep 17 00:00:00 2001
From: Nitin Kumar <snitin315@gmail.com>
Date: Wed, 25 Oct 2023 12:24:16 +0530
Subject: [PATCH] fix(Dropdown): enhance tag selection handling (#1729)

---
 .changeset/silver-keys-press.md               |  5 ++
 .../Dropdown/__tests__/Dropdown.web.test.tsx  | 75 +++++++++++++++++++
 .../BaseDropdownInputTrigger.tsx              |  2 +-
 3 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/silver-keys-press.md

diff --git a/.changeset/silver-keys-press.md b/.changeset/silver-keys-press.md
new file mode 100644
index 00000000000..354881b826b
--- /dev/null
+++ b/.changeset/silver-keys-press.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(Dropdown): enhance tag selection handling
diff --git a/packages/blade/src/components/Dropdown/__tests__/Dropdown.web.test.tsx b/packages/blade/src/components/Dropdown/__tests__/Dropdown.web.test.tsx
index b03a6020639..d24e40b4b68 100644
--- a/packages/blade/src/components/Dropdown/__tests__/Dropdown.web.test.tsx
+++ b/packages/blade/src/components/Dropdown/__tests__/Dropdown.web.test.tsx
@@ -520,6 +520,81 @@ describe('<Dropdown />', () => {
     Object.defineProperty(HTMLElement.prototype, 'clientWidth', { configurable: true, value: 0 });
   });
 
+  // https://github.com/razorpay/blade/issues/1721
+  it('should handle controlled props & disabled options with multi select', async () => {
+    const ControlledDropdown = (): React.ReactElement => {
+      const [currentSelection, setCurrentSelection] = React.useState<string[]>([]);
+      const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+
+      return (
+        <>
+          <Button
+            onClick={() => {
+              if (!currentSelection.includes('bangalore')) {
+                setCurrentSelection([...currentSelection, 'bangalore']);
+              }
+            }}
+          >
+            Select Bangalore
+          </Button>
+          <Button onClick={() => setIsDropdownOpen(!isDropdownOpen)}>Toggle Dropdown</Button>
+
+          <Dropdown
+            isOpen={isDropdownOpen}
+            onOpenChange={setIsDropdownOpen}
+            selectionType="multiple"
+          >
+            <SelectInput
+              label="Select City"
+              value={currentSelection}
+              onChange={(args) => {
+                if (args) {
+                  setCurrentSelection(args.values);
+                }
+              }}
+            />
+            <DropdownOverlay>
+              <ActionList>
+                <ActionListItem title="Delhi" value="delhi" isDisabled />
+                <ActionListItem title="Bangalore" value="bangalore" />
+                <ActionListItem title="Pune" value="pune" />
+                <ActionListItem title="Chennai" value="chennai" />
+              </ActionList>
+            </DropdownOverlay>
+          </Dropdown>
+        </>
+      );
+    };
+
+    // JSDOM doesn't calculate layouts so always return 0 https://github.com/testing-library/react-testing-library/issues/353#issuecomment-481248489
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', { configurable: true, value: 500 });
+
+    const user = userEvent.setup();
+    const { getByRole, queryAllByLabelText, queryByRole } = renderWithTheme(<ControlledDropdown />);
+
+    const selectInput = getByRole('combobox', { name: 'Select City' });
+    expect(selectInput).toHaveTextContent('Select Option');
+    expect(queryAllByLabelText('Close Bangalore tag')?.[0]).toBeFalsy();
+    await user.click(getByRole('button', { name: 'Select Bangalore' }));
+    expect(queryAllByLabelText('Close Bangalore tag')?.[0]).toBeInTheDocument();
+
+    await user.click(selectInput);
+
+    expect(getByRole('option', { name: 'Delhi' })).toHaveAttribute('aria-disabled', 'true');
+
+    await user.click(getByRole('option', { name: 'Pune' }));
+    expect(queryAllByLabelText('Close Pune tag')?.[0]).toBeInTheDocument();
+    expect(queryAllByLabelText('Close Bangalore tag')?.[0]).toBeInTheDocument();
+
+    await user.click(getByRole('button', { name: 'Select Bangalore' }));
+
+    await user.click(getByRole('button', { name: 'Toggle Dropdown' }));
+    await waitFor(() => expect(getByRole('listbox', { name: 'Select City' })).toBeVisible());
+    await user.click(getByRole('button', { name: 'Toggle Dropdown' }));
+    await waitFor(() => expect(queryByRole('listbox', { name: 'Select City' })).not.toBeVisible());
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', { configurable: true, value: 0 });
+  });
+
   it('should accept testID', async () => {
     const { getByTestId, getByRole } = renderWithTheme(
       <Dropdown>
diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.tsx b/packages/blade/src/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.tsx
index b35021bf24d..36f8ceef214 100644
--- a/packages/blade/src/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.tsx
+++ b/packages/blade/src/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.tsx
@@ -194,7 +194,7 @@ const _BaseDropdownInputTrigger = (
       }
 
       return getTagsGroup({
-        tags: selectedIndices.map((selectedIndex) => options[selectedIndex].title),
+        tags: selectedIndices.map((selectedIndex) => options[selectedIndex]?.title),
         activeTagIndex,
         onDismiss: ({ tagIndex }) => {
           if (isTagDismissedRef.current) {