Merge branch 'main' into Filterable_multiselect_onFocus_issue

carbon-design-system · Jun 26, 2024 · 3943d39 · 3943d39
2 parents a02e0a3 + 305c274
commit 3943d39
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 7 deletions.
diff --git 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) => {

diff --git 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
@@ -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;