fix: Constrain dropdown width to viewport

pages/dropdown/min-width.page.tsx

@@ -9,7 +9,7 @@ export default function DropdownScenario() {
   const [open, setOpen] = useState(false);
   return (
     <article>
-      <h1>Dropdown`s midWidth property test</h1>
+      <h1>Dropdown`s minWidth property test</h1>
       <ul>
         <li>
           Dropdown should have the width equal to <code>minWidth</code>, if the trigger is larger than it

pages/dropdown/width.page.tsx

@@ -0,0 +1,187 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext, useState } from 'react';
+import Select, { SelectProps } from '~components/select';
+import Multiselect, { MultiselectProps } from '~components/multiselect';
+import Autosuggest from '~components/autosuggest';
+import AppContext, { AppContextType } from '../app/app-context';
+import SpaceBetween from '~components/space-between';
+import ColumnLayout from '~components/column-layout';
+
+type DemoContext = React.Context<
+  AppContextType<{
+    component: string;
+    triggerWidth: string;
+    virtualScroll: boolean;
+    expandToViewport: boolean;
+    containerWidth: string;
+  }>
+>;
+
+const shortOptionText = 'Short text';
+const longOptionText =
+  'A very very very very very very very very very very very very very very very very very very very very very very very very very very long text';
+
+const componentOptions: ReadonlyArray<SelectProps.Option> = [
+  {
+    value: 'autosuggest',
+    label: 'Autosuggest',
+  },
+  {
+    value: 'multiselect',
+    label: 'Multiselect',
+  },
+  {
+    value: 'select',
+    label: 'Select',
+  },
+  {
+    value: 'property-filter',
+    label: 'Property filter',
+  },
+];
+
+function SettingsForm() {
+  const { urlParams, setUrlParams } = useContext(AppContext as DemoContext);
+
+  return (
+    <ColumnLayout columns={4}>
+      <label>
+        Component{' '}
+        <select
+          value={componentOptions.find(option => option.value === urlParams.component)?.value || ''}
+          onChange={event => setUrlParams({ component: event.target.value })}
+        >
+          <option value="" disabled={true}>
+            Select a component
+          </option>
+          {componentOptions.map(option => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label>
+        Trigger width{' '}
+        <input
+          placeholder={'example: 300px'}
+          value={urlParams.triggerWidth || ''}
+          onChange={event => setUrlParams({ triggerWidth: event.target.value })}
+        />
+      </label>
+      <label>
+        Container width{' '}
+        <input
+          placeholder={'example: 500px'}
+          value={urlParams.containerWidth || ''}
+          onChange={event => setUrlParams({ containerWidth: event.target.value })}
+        />
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={urlParams.expandToViewport}
+          onChange={event => setUrlParams({ expandToViewport: event.target.checked })}
+        />{' '}
+        expandToViewport
+      </label>
+      {['autosuggest', 'multiselect', 'property-filter', 'select'].includes(urlParams.component) && (
+        <label>
+          <input
+            type="checkbox"
+            checked={urlParams.virtualScroll}
+            onChange={event => setUrlParams({ virtualScroll: event.target.checked })}
+          />{' '}
+          virtualScroll
+        </label>
+      )}
+    </ColumnLayout>
+  );
+}
+
+function CustomAutosuggest({ expandToViewport, virtualScroll }: { expandToViewport: boolean; virtualScroll: boolean }) {
+  const [value, setValue] = useState('');
+  return (
+    <Autosuggest
+      value={value}
+      onChange={e => setValue(e.detail.value)}
+      options={[
+        { value: longOptionText, tags: ['tag1', 'tag2'], filteringTags: ['bla', 'opt'], description: 'description1' },
+        { value: shortOptionText, labelTag: 'This is a label tag' },
+      ]}
+      ariaLabel="simple autosuggest"
+      virtualScroll={virtualScroll}
+      expandToViewport={expandToViewport}
+    />
+  );
+}
+
+function CustomMultiSelect({ expandToViewport, virtualScroll }: { expandToViewport: boolean; virtualScroll: boolean }) {
+  const [selectedOptions, setSelectedOptions] = useState<ReadonlyArray<MultiselectProps.Option>>([]);
+  return (
+    <Multiselect
+      expandToViewport={expandToViewport}
+      virtualScroll={virtualScroll}
+      options={[
+        { value: 'first', label: longOptionText },
+        {
+          value: 'second',
+          label: shortOptionText,
+        },
+      ]}
+      selectedOptions={selectedOptions}
+      onChange={({ detail }) => setSelectedOptions(detail.selectedOptions)}
+    />
+  );
+}
+
+function CustomSelect({ expandToViewport, virtualScroll }: { expandToViewport: boolean; virtualScroll: boolean }) {
+  const [selectedOption, setSelectedOption] = useState<SelectProps['selectedOption']>(null);
+  return (
+    <Select
+      selectedOption={selectedOption}
+      options={[
+        {
+          value: longOptionText,
+          tags: ['tag1', 'tag2'],
+          filteringTags: ['bla', 'opt'],
+          description: 'description1',
+        },
+        { value: shortOptionText },
+      ]}
+      onChange={event => setSelectedOption(event.detail.selectedOption)}
+      ariaLabel={'simple select'}
+      filteringType={'auto'}
+      virtualScroll={virtualScroll}
+      expandToViewport={expandToViewport}
+    />
+  );
+}
+
+export default function () {
+  const { urlParams } = useContext(AppContext as DemoContext);
+
+  const { component, triggerWidth, virtualScroll, expandToViewport, containerWidth } = urlParams;
+  return (
+    <article>
+      <h1>Dropdown width</h1>
+      <SpaceBetween size="l">
+        <SettingsForm />
+        <div style={{ width: containerWidth, height: '300px', overflow: 'hidden', border: `1px solid blue` }}>
+          <div style={{ width: triggerWidth }}>
+            {component === 'autosuggest' && (
+              <CustomAutosuggest virtualScroll={virtualScroll} expandToViewport={expandToViewport} />
+            )}
+            {component === 'multiselect' && (
+              <CustomMultiSelect expandToViewport={expandToViewport} virtualScroll={virtualScroll} />
+            )}
+            {component === 'select' && (
+              <CustomSelect expandToViewport={expandToViewport} virtualScroll={virtualScroll} />
+            )}
+          </div>
+        </div>
+      </SpaceBetween>
+    </article>
+  );
+}

src/internal/components/dropdown/__integ__/width.test.ts

@@ -0,0 +1,107 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import createWrapper from '../../../../../lib/components/test-utils/selectors';
+
+type ComponentId = 'autosuggest' | 'multiselect' | 'select';
+
+function getWrapperAndTrigger(componentId: ComponentId) {
+  const wrapper = createWrapper();
+  let componentWrapper;
+  switch (componentId) {
+    case 'autosuggest':
+      componentWrapper = wrapper.findAutosuggest();
+      return {
+        wrapper: componentWrapper,
+        trigger: componentWrapper.findNativeInput(),
+      };
+    case 'multiselect':
+      componentWrapper = wrapper.findMultiselect();
+      return {
+        wrapper: componentWrapper,
+        trigger: componentWrapper.findTrigger(),
+      };
+    case 'select':
+      componentWrapper = wrapper.findSelect();
+      return {
+        wrapper: componentWrapper,
+        trigger: componentWrapper.findTrigger(),
+      };
+  }
+}
+
+function setupTest(
+  {
+    pageWidth,
+    componentId,
+    triggerWidth,
+    expandToViewport,
+    virtualScroll,
+  }: {
+    pageWidth: number;
+    componentId: ComponentId;
+    triggerWidth: number;
+    expandToViewport: boolean;
+    virtualScroll: boolean;
+  },
+  testFn: (page: BasePageObject) => Promise<void>
+) {
+  return useBrowser({ width: pageWidth, height: 1000 }, async browser => {
+    await browser.url(
+      `#/light/dropdown/width?component=${componentId}&expandToViewport=${expandToViewport}&width=${triggerWidth}px&virtualScroll=${virtualScroll}`
+    );
+    const page = new BasePageObject(browser);
+    await page.waitForVisible(getWrapperAndTrigger(componentId).wrapper.toSelector());
+    await testFn(page);
+  });
+}
+
+async function openDropdown({
+  componentId,
+  page,
+  expandToViewport,
+}: {
+  componentId: ComponentId;
+  page: BasePageObject;
+  expandToViewport: boolean;
+}) {
+  const { wrapper, trigger } = getWrapperAndTrigger(componentId);
+  await page.click(trigger.toSelector());
+  const openDropdownSelector = wrapper.findDropdown({ expandToViewport }).findOpenDropdown().toSelector();
+  await expect(openDropdownSelector).toBeTruthy();
+  return page.getBoundingBox(openDropdownSelector);
+}
+
+describe('Dropdown width', () => {
+  const triggerWidth = 200;
+  describe('stretches beyond the trigger width if there is enough space', () => {
+    const pageWidth = 500;
+    describe.each([false, true])('expandToViewport: %s', expandToViewport => {
+      test.each(['autosuggest', 'multiselect', 'select'])('with %s', componentId =>
+        setupTest(
+          { componentId: componentId as ComponentId, triggerWidth, pageWidth, expandToViewport, virtualScroll: false },
+          async page => {
+            const dropdownBox = await openDropdown({ componentId: componentId as ComponentId, page, expandToViewport });
+            expect(dropdownBox.width).toBeGreaterThan(triggerWidth);
+            expect(dropdownBox.left + dropdownBox.width).toBeLessThanOrEqual(pageWidth);
+          }
+        )()
+      );
+    });
+  });
+  describe('does not overflow the viewport', () => {
+    const pageWidth = 350;
+    describe.each([false, true])('expandToViewport: %s', expandToViewport => {
+      test.each(['autosuggest', 'multiselect', 'select'])('with %s', componentId =>
+        setupTest(
+          { componentId: componentId as ComponentId, triggerWidth, pageWidth, expandToViewport, virtualScroll: false },
+          async page => {
+            const dropdownBox = await openDropdown({ componentId: componentId as ComponentId, page, expandToViewport });
+            expect(dropdownBox.left + dropdownBox.width).toBeLessThanOrEqual(pageWidth);
+          }
+        )()
+      );
+    });
+  });
+});

src/internal/components/dropdown/__tests__/dropdown-fit-handler.test.ts

@@ -14,6 +14,7 @@
   height: '605px',
   left: 'auto',
   width: '100px',
+  overflows: false,
 };
 
 function getSizedElement(width: number, height: number, top = 0, left = 0) {
@@ -53,6 +54,7 @@
       getDropdownPosition({ triggerElement: trigger, dropdownElement: dropdown, overflowParents: [windowSize] })
     ).toEqual({
       ...defaults,
+      overflows: true,
       dropLeft: true,
       width: '550px',
     });
@@ -125,7 +127,7 @@
       getDropdownPosition({ triggerElement: trigger, dropdownElement: dropdown, overflowParents: [windowSize] })
     ).toEqual({
       ...defaults,
       dropLeft: true, // TODO: this value is incorrect, should be fixed, see AWSUI-16369 for details
     });
   });
 

src/internal/components/dropdown/dropdown-fit-handler.ts

@@ -20,6 +20,7 @@ export interface DropdownPosition {
   dropUp: boolean;
   dropLeft: boolean;
   left: string;
+  overflows: boolean;
 }
 export interface InteriorDropdownPosition extends DropdownPosition {
   bottom: string;
@@ -165,6 +166,7 @@ export const getDropdownPosition = ({
   let dropLeft: boolean;
   let left: number | null = null;
   let width = idealWidth;
+  let overflows = false;
 
   //1. Can it be positioned with ideal width to the right?
   if (idealWidth <= availableSpace.right) {
@@ -176,6 +178,7 @@ export const getDropdownPosition = ({
   } else {
     dropLeft = availableSpace.left > availableSpace.right;
     width = Math.max(availableSpace.left, availableSpace.right, minWidth);
+    overflows = true;
   }
 
   if (preferCenter) {
@@ -202,6 +205,7 @@ export const getDropdownPosition = ({
     left: left === null ? 'auto' : `${left}px`,
     height: `${croppedHeight}px`,
     width: `${width}px`,
+    overflows,
   };
 };
 
@@ -216,6 +220,7 @@ export const getInteriorDropdownPosition = (
   const { top: parentDropdownTop, height: parentDropdownHeight } = getClosestParentDimensions(trigger);
 
   let dropLeft;
+  let overflows = false;
 
   let width = dropdown.getBoundingClientRect().width;
   const top = triggerTop - parentDropdownTop;
@@ -226,6 +231,7 @@ export const getInteriorDropdownPosition = (
   } else {
     dropLeft = availableSpace.left > availableSpace.right;
     width = Math.max(availableSpace.left, availableSpace.right);
+    overflows = true;
   }
 
   const left = dropLeft ? 0 - width : triggerWidth;
@@ -244,6 +250,7 @@ export const getInteriorDropdownPosition = (
     top: `${top}px`,
     bottom: `${bottom}px`,
     left: `${left}px`,
+    overflows,
   };
 };
 

src/internal/components/dropdown/index.tsx

@@ -197,6 +197,14 @@ const Dropdown = ({
     } else {
       target.style.width = position.width;
     }
+
+    // Prevent the dropdown width from stretching beyond the trigger width
+    // if that is going to cause the dropdown to be cropped because of overflow
+    if (position.overflows) {
+      target.classList.remove(styles['stretch-beyond-trigger-width']);
+      target.style.removeProperty('maxWidth');
+    }
+
     // Using styles for main dropdown to adjust its position as preferred alternative
     if (position.dropUp && !interior) {
       target.classList.add(styles['dropdown-drop-up']);