From a06df26e4f682da8c5da0a1e8f946064ca7b8a4f Mon Sep 17 00:00:00 2001
From: Preeti Bansal <146315451+preetibansalui@users.noreply.github.com>
Date: Wed, 26 Jun 2024 18:36:04 +0530
Subject: [PATCH 1/5] fix: modal overflow of dropdown (#16544)

* fix: modal overfloww of dropdown

* feat: added example of floating ui in modal

---------

Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com>
---
 .../src/components/Modal/Modal.stories.js     | 55 +++++++++++++++++++
 .../styles/scss/components/modal/_modal.scss  |  5 ++
 2 files changed, 60 insertions(+)

diff --git a/packages/react/src/components/Modal/Modal.stories.js b/packages/react/src/components/Modal/Modal.stories.js
index fb60764d3560..1dcf41f52be8 100644
--- a/packages/react/src/components/Modal/Modal.stories.js
+++ b/packages/react/src/components/Modal/Modal.stories.js
@@ -322,6 +322,61 @@ export const Playground = ({ numberOfButtons, ...args }) => {
           <SelectItem value="us-south" text="US South" />
           <SelectItem value="us-east" text="US East" />
         </Select>
+
+        <Dropdown
+          autoAlign={true}
+          id="default"
+          style={{ margin: '1rem 0' }}
+          titleText="Dropdown Example of Floating ui"
+          helperText="This is some helper text"
+          // initialSelectedItem={items[1]}
+          label="Option 1"
+          items={[
+            {
+              id: 'option-0',
+              text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+            },
+            {
+              id: 'option-1',
+              text: 'Option 1',
+            },
+            {
+              id: 'option-2',
+              text: 'Option 2',
+            },
+            {
+              id: 'option-3',
+              text: 'Option 3 - a disabled item',
+              disabled: true,
+            },
+            {
+              id: 'option-4',
+              text: 'Option 4',
+            },
+            {
+              id: 'option-5',
+              text: 'Option 5',
+            },
+          ]}
+          itemToString={(item) => (item ? item.text : '')}
+          direction="top"
+        />
+
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+          accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+          posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
+          condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
+          Quisque consectetur non risus eu rutrum.{' '}
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+          accumsan augue. Phasellus consequat augue vitae tellus tincidunt
+          posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices
+          condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus.
+          Quisque consectetur non risus eu rutrum.{' '}
+        </p>
+
         {args.hasScrollingContent && (
           <>
             <p>
diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
index 65bb53799dfd..bd79cccfd024 100644
--- a/packages/styles/scss/components/modal/_modal.scss
+++ b/packages/styles/scss/components/modal/_modal.scss
@@ -320,6 +320,11 @@
       linear-gradient(to top, $layer 0, 2px, transparent 2px);
   }
 
+  //removing mask image in case we have dropdown in modal
+  .#{$prefix}--modal-scroll-content:has(.#{$prefix}--dropdown--autoalign) {
+    mask-image: none;
+  }
+
   // Required so overflow-indicator disappears at end of content
   .#{$prefix}--modal-scroll-content > *:last-child {
     margin-block-end: $spacing-06;

From 305c274dd0ae6f925df26c361d8f8607f4b959e7 Mon Sep 17 00:00:00 2001
From: Taylor Jones <tay1orjones@users.noreply.github.com>
Date: Wed, 26 Jun 2024 09:23:57 -0500
Subject: [PATCH 2/5] fix(combobox): memoize floating ui ref to prevent max
 call depth (#16866)

Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>
---
 .../src/components/ComboBox/ComboBox.tsx      | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
index 3fa05acf5ae3..9fdf344dd3e5 100644
--- a/packages/react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -13,6 +13,7 @@ import React, {
   useEffect,
   useState,
   useRef,
+  useMemo,
   forwardRef,
   type ReactNode,
   type ComponentType,
@@ -655,6 +656,15 @@ const ComboBox = forwardRef(
       (helperText && !isFluid && helperTextId) ||
       undefined;
 
+    const menuProps = useMemo(
+      () =>
+        getMenuProps({
+          'aria-label': deprecatedAriaLabel || ariaLabel,
+          ref: autoAlign ? refs.setFloating : null,
+        }),
+      [autoAlign, deprecatedAriaLabel, ariaLabel]
+    );
+
     return (
       <div className={wrapperClasses}>
         {titleText && (
@@ -674,7 +684,7 @@ const ComboBox = forwardRef(
           light={light}
           size={size}
           warn={warn}
-          ref={refs.setReference}
+          ref={autoAlign ? refs.setReference : null}
           warnText={warnText}
           warnTextId={warnTextId}>
           <div className={`${prefix}--list-box__field`}>
@@ -686,7 +696,7 @@ const ComboBox = forwardRef(
               aria-haspopup="listbox"
               title={textInput?.current?.value}
               {...getInputProps({
-                'aria-controls': isOpen ? undefined : getMenuProps().id,
+                'aria-controls': isOpen ? undefined : menuProps.id,
                 placeholder,
                 ref: { ...mergeRefs(textInput, ref) },
                 onKeyDown: (
@@ -785,11 +795,7 @@ const ComboBox = forwardRef(
             />
           </div>
           {normalizedSlug}
-          <ListBox.Menu
-            {...getMenuProps({
-              'aria-label': deprecatedAriaLabel || ariaLabel,
-            })}
-            ref={mergeRefs(getMenuProps().ref, refs.setFloating)}>
+          <ListBox.Menu {...menuProps}>
             {isOpen
               ? filterItems(items, itemToString, inputValue).map(
                   (item, index) => {

From 1190e09210c8e86f888deb9eb26bbb2a116ea5e3 Mon Sep 17 00:00:00 2001
From: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
Date: Wed, 26 Jun 2024 11:46:30 -0300
Subject: [PATCH 3/5] fix: fixed spelling (#16870)

---
 .github/renovate.json5 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/renovate.json5 b/.github/renovate.json5
index 31a7ddfb270d..c21cbad18eaf 100644
--- a/.github/renovate.json5
+++ b/.github/renovate.json5
@@ -13,7 +13,7 @@
     'npm:unpublishSafe',
 
     // https://docs.renovatebot.com/presets-schedule/#scheduledaily
-    'schedule:weekday',
+    'schedule:every weekday',
   ],
   vulnerabilityAlerts: {
     enabled: true,

From 3636b9fc45a9a067e438011fd47c7669d26e9b5c Mon Sep 17 00:00:00 2001
From: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com>
Date: Wed, 26 Jun 2024 22:55:24 +0530
Subject: [PATCH 4/5] fix: focus issue in filterable multiselect (#16840)

* fix: focus issue in filterable multiselect

* fix: added test cases and focus fixes

* Update FilterableMultiSelect-test.js

* Update FilterableMultiSelect-test.js

* Update MultiSelect.stories.js

* Update packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx

---------

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
---
 .../MultiSelect/FilterableMultiSelect.tsx          |  6 ++++--
 .../__tests__/FilterableMultiSelect-test.js        | 14 ++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
index 66d2ebebeafe..6b6bd8f25038 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -518,8 +518,6 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
         return changes;
       case InputBlur:
       case InputKeyDownEscape:
-        setInputFocused(false);
-        setInputValue('');
         setIsOpen(false);
         return changes;
       case FunctionToggleMenu:
@@ -714,6 +712,10 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
         }
       },
       onFocus: () => setInputFocused(true),
+      onBlur: () => {
+        !isOpen && setInputFocused(false);
+        setInputValue('');
+      },
     })
   );
   const menuProps = getMenuProps({}, { suppressRefError: true });
diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index 433debc08b1d..a9f02f2329a0 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -170,6 +170,20 @@ describe('FilterableMultiSelect', () => {
     expect(screen.getByPlaceholderText('test')).toHaveDisplayValue(3);
   });
 
+  it('should clear input value when clicking on cross button', async () => {
+    render(<FilterableMultiSelect {...mockProps} placeholder="test" />);
+    await openMenu();
+
+    await userEvent.type(screen.getByPlaceholderText('test'), '3');
+
+    const clearButton = screen.getByRole('button', {
+      name: 'Clear selected item',
+    });
+    await userEvent.click(clearButton);
+
+    expect(screen.getByPlaceholderText('test')).toHaveDisplayValue('');
+  });
+
   it('should respect slug prop', async () => {
     const { container } = render(
       <FilterableMultiSelect {...mockProps} slug={<Slug />} />

From 697684e7ebc6b82a9bdadb58fe8a0a754312f016 Mon Sep 17 00:00:00 2001
From: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com>
Date: Thu, 27 Jun 2024 01:01:26 +0530
Subject: [PATCH 5/5] fix: popover closing issue when clicked on overflow menu
 (#16792)

* fix: popover closing issue when clicked on overflow menu

* Update packages/react/src/components/OverflowMenu/OverflowMenu-test.js

* Update OverflowMenu-test.js

* Update OverflowMenu-test.js

---------

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
---
 .../OverflowMenu/OverflowMenu-test.js         | 26 +++++++-
 .../components/OverflowMenu/OverflowMenu.tsx  |  1 -
 .../src/components/Popover/Popover.stories.js | 63 +++++++++++++++++++
 3 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
index 46eec3e5834d..daa44bb499d1 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu-test.js
@@ -10,7 +10,7 @@ import OverflowMenu from './OverflowMenu';
 import OverflowMenuItem from '../OverflowMenuItem';
 import { Filter } from '@carbon/icons-react';
 import userEvent from '@testing-library/user-event';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 
 describe('OverflowMenu', () => {
   describe('Renders as expected', () => {
@@ -171,5 +171,29 @@ describe('OverflowMenu', () => {
         'true'
       );
     });
+
+    it('should call onClick handler only once per click', async () => {
+      const handleClick = jest.fn();
+
+      render(
+        <OverflowMenu
+          open
+          aria-label="Overflow menu"
+          className="extra-class"
+          onClick={handleClick}>
+          <OverflowMenuItem className="test-child" itemText="one" />
+          <OverflowMenuItem className="test-child" itemText="two" />
+        </OverflowMenu>
+      );
+
+      // Find the OverflowMenu button
+      const button = screen.getByRole('button');
+
+      // Click the OverflowMenu button
+      await userEvent.click(button);
+
+      // Check that the click handler was called only once
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
   });
 });
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.tsx b/packages/react/src/components/OverflowMenu/OverflowMenu.tsx
index 157a976655de..b6ee30ccddb3 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu.tsx
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu.tsx
@@ -439,7 +439,6 @@ class OverflowMenu extends React.Component<
   handleClick = (evt) => {
     const { onClick = noopFn } = this.props;
     this.setState({ click: true });
-    evt.stopPropagation();
     if (!this._menuBody || !this._menuBody.contains(evt.target)) {
       this.setState({ open: !this.state.open });
       onClick(evt);
diff --git a/packages/react/src/components/Popover/Popover.stories.js b/packages/react/src/components/Popover/Popover.stories.js
index 1285cf930f7a..f32b32e60068 100644
--- a/packages/react/src/components/Popover/Popover.stories.js
+++ b/packages/react/src/components/Popover/Popover.stories.js
@@ -15,6 +15,8 @@ import { default as Checkbox } from '../Checkbox';
 import mdx from './Popover.mdx';
 import { Settings } from '@carbon/icons-react';
 import { keys, match } from '../../internal/keyboard';
+import OverflowMenu from '../OverflowMenu/OverflowMenu';
+import OverflowMenuItem from '../OverflowMenuItem';
 
 const prefix = 'cds';
 
@@ -267,6 +269,67 @@ export const ExperimentalAutoAlign = () => {
     </div>
   );
 };
+export const Test = () => {
+  const [open, setOpen] = useState();
+  const align = document?.dir === 'rtl' ? 'bottom-right' : 'bottom-left';
+  const alignTwo = document?.dir === 'rtl' ? 'bottom-left' : 'bottom-right';
+  return (
+    <div style={{ display: 'flex', gap: '8rem' }}>
+      <OverflowMenu
+        flipped={document?.dir === 'rtl'}
+        aria-label="overflow-menu">
+        <OverflowMenuItem itemText="Stop app" />
+        <OverflowMenuItem itemText="Restart app" />
+        <OverflowMenuItem itemText="Rename app" />
+        <OverflowMenuItem itemText="Clone and move app" disabled requireTitle />
+        <OverflowMenuItem itemText="Edit routes and access" requireTitle />
+        <OverflowMenuItem hasDivider isDelete itemText="Delete app" />
+      </OverflowMenu>
+
+      <Popover
+        align={align}
+        open={open}
+        onKeyDown={(evt) => {
+          if (match(evt, keys.Escape)) {
+            setOpen(false);
+          }
+        }}
+        isTabTip
+        onRequestClose={() => setOpen(false)}>
+        <button
+          aria-label="Settings"
+          type="button"
+          aria-expanded={open}
+          onClick={() => {
+            setOpen(!open);
+          }}>
+          <Settings />
+        </button>
+        <PopoverContent className="p-3">
+          <RadioButtonGroup
+            style={{ alignItems: 'flex-start', flexDirection: 'column' }}
+            legendText="Row height"
+            name="radio-button-group"
+            defaultSelected="small">
+            <RadioButton labelText="Small" value="small" id="radio-small" />
+            <RadioButton labelText="Large" value="large" id="radio-large" />
+          </RadioButtonGroup>
+          <hr />
+          <fieldset className={`cds--fieldset`}>
+            <legend className={`cds--label`}>Edit columns</legend>
+            <Checkbox defaultChecked labelText="Name" id="checkbox-label-1" />
+            <Checkbox defaultChecked labelText="Type" id="checkbox-label-2" />
+            <Checkbox
+              defaultChecked
+              labelText="Location"
+              id="checkbox-label-3"
+            />
+          </fieldset>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
 
 export const TabTipExperimentalAutoAlign = () => {
   const [open, setOpen] = useState(true);