feat: Add filtering to button dropdown by avinashbot · Pull Request #4637 · cloudscape-design/components

avinashbot · 2026-06-16T15:03:42Z

Description

Button dropdown action filtering implemented a similar way to select/multiselect filtering. The big underlying change is that filtering requires the use of aria-activedescendant rather than simply moving focus from item to item. So most of the internal changes are about disabling focusing logic when filtering is active, so that the real focus can stay on the input (and "accessibility" focus can move around using aria-activedescendant).

Rel: AWSUI-61960 (Chorus: qodG8KXdJXXk)

How has this been tested?

Updated unit tests, a bit of manual accessibility testing, but more validation with other screen readers is needed.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

Changes include appropriate documentation updates.
Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
Changes do not include unsupported browser features, see CONTRIBUTING.md.
Changes were manually tested for accessibility, see accessibility guidelines.

Security

If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

Changes are covered with new/existing unit tests?
Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

codecov · 2026-06-16T22:09:18Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.58%. Comparing base (d326da3) to head (e553244).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4637      +/-   ##
==========================================
+ Coverage   97.57%   97.58%   +0.01%     
==========================================
  Files         948      950       +2     
  Lines       30489    30604     +115     
  Branches    11149    11203      +54     
==========================================
+ Hits        29749    29866     +117     
- Misses        693      731      +38     
+ Partials       47        7      -40

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

pan-kot · 2026-06-24T15:01:40Z

+  const onItemClick = (event: CustomEvent<ButtonDropdownProps.ItemClickDetails>) => console.log(event.detail);
+
+  return (
+    <article>


nit: You can use SimplePage helper. It comes with a slot for page's title and simplifies the addition of screenshot area and i18n.

pan-kot · 2026-06-24T15:05:14Z

  }

+  /**
+   * Finds the filtering input rendered inside the open dropdown when `filteringType` is set.


nit: filteringType can as well be "none", so the comment is not quite accurate.

pan-kot · 2026-06-24T15:15:43Z

  }

  export type RenderItem = ActionRenderItem | CheckboxRenderItem | GroupRenderItem;
  export type ItemRenderer = (props: { item: ButtonDropdownProps.RenderItem }) => ReactNode | null;


Should we pass filterText as a separate argument here, adjacent to item instead of adding it to each item?

pan-kot · 2026-06-24T15:25:57Z

+import { ButtonDropdownProps } from '../interfaces';
+import { isItemGroup } from './utils';
+
+function matchesString(value: string | undefined, searchText: string): boolean {


nit: matchesString, matchesItem, and collectMatchingLeaves implicitly rely on the searchText being lowercased. I think we should either explicitly document it e.g. with a var name, or instead move all three function definitions under filterItems - so that searchText can also be taken from context:

export function filterItems(...) { if (!filterText) { return items; } const searchText = filterText.toLowerCase(); function matchesString(value) {...} function matchesItem(item) {...} function collectMatchingLeaves(items) {...} return items.reduce(...); }

pan-kot · 2026-06-24T15:34:44Z

+  // rather than by the Tab keydown. The Dropdown's onBlur only fires once focus moves outside
+  // the trigger and the dropdown content, which is exactly when we want to close.
+  const onDropdownBlur = () => {
+    if (hasFiltering && isOpen) {


Do we actually need to check for hasFiltering and isOpen - can we close it unconditionally instead?

pan-kot · 2026-06-24T15:36:50Z

+        // While filtering, pressing Enter without a highlighted item should do nothing
+        // (matching select/multiselect) rather than closing the dropdown with no selection.
+        if (hasFiltering && !targetItem) {
+          event.preventDefault();


This makes clear filter button irresponsive when pressing Enter

pan-kot · 2026-06-24T15:38:04Z

      }
      case KeyCode.left:
      case KeyCode.right: {
+        if (hasFiltering && filteringValue) {


nit: it would make sense to add code comments explaining this change. I assume in this case we want that left/right keys would move the filter cursor, while expanding sections is no longer relevant once there is input.

pan-kot · 2026-06-24T15:38:47Z

        break;
      }
      case KeyCode.tab: {
-        // When expanded to viewport the focus can't move naturally to the next element.


Why was this comment removed?

pan-kot · 2026-06-24T15:39:27Z

    }
  };
  const onKeyUp = (event: React.KeyboardEvent) => {
-    // We need to handle activating items with Space separately because there is a bug


why was this comment removed?

pan-kot · 2026-06-24T15:42:03Z

          onOutsideClick={() => toggleDropdown()}
+          // In filtering mode the dropdown is a dialog with several focusable elements, so we
+          // close it once focus leaves the trigger and the dropdown content rather than on Tab.
+          onBlur={hasFiltering ? onDropdownBlur : undefined}


can this be un-conditonal?

pan-kot · 2026-06-24T15:47:54Z

  const ref = useRef<HTMLSpanElement | null>(null);
  const isReducedMotion = useReducedMotion(ref);
  const { open, triggerProps } = useTooltipOpen(isReducedMotion ? 0 : DEFAULT_OPEN_TIMEOUT_IN_MS);
+  const isOpen = open || !!show;


The original visibility logic includes some delays, but the new "show" property does not come with anything like that - what is the problem that visibility state addresses with delayed open?

Is there a chance that we can use a shared solution, no matter if filtering is used? Ideally, that solution should use the src/tooltip component instead of this custom one.

pan-kot · 2026-06-25T07:28:13Z

+}
+
+function getMenuItems(container: HTMLElement): HTMLElement[] {
+  return Array.from(container.querySelectorAll('[role="menuitem"], [role="menuitemcheckbox"]'));


Why don't we use test-utils for this selector?

pan-kot · 2026-06-25T07:29:00Z

+  });
+
+  describe('filter input rendering', () => {
+    test('does not render filter input when filteringType is not set', () => {


Should we check for both filteringType=undefined and filteringType="none"?

pan-kot · 2026-06-25T07:32:02Z

+
+      const dropdownEl = wrapper.findOpenDropdown()!.getElement();
+      act(() => {
+        fireEvent.keyDown(dropdownEl, { keyCode: KeyCode.down });


nit: alternatively, we can do wrapper.findOpenDropdown()!.keyDown(KeyCode.down)

pan-kot · 2026-06-25T07:39:59Z

+        input.focus();
+      });
+      act(() => {
+        clearButton.focus();


I believe this does not capture the regression. Wasn't the issue due to the Tab keypress handling? I think we should rather secure this with an integration test then.

pan-kot · 2026-06-25T07:41:05Z

+        input.focus();
+      });
+
+      // Shift+Tabbing back to the input stays within the dropdown, so it remains open.


The code above does not technically Shift+Tab. This test and the one before can be translated to the integ tests with the same design, but with proper Tab/Shift+Tab calls.

pan-kot · 2026-06-25T07:46:39Z

+        fireEvent.keyDown(input, { keyCode: KeyCode.left });
+      });
+      // Filtering renders groups flat, so the nested items are visible regardless of expansion.
+      expect(wrapper.findOpenDropdown()).not.toBeNull();


This assertion can work if the test was: "Left and Right arrow keys do not close the dropdown".

In the original button dropdown the expandable sections can be not only expanded, but also collapsed. One thing we can check is:

expect(getItemsCount()).toBe(filteredItemsCount); // Make item inside a group highlighted input.keyDown(KeyCode.down); input.keyDown(KeyCode.down); input.keyDown(KeyCode.right); expect(getItemsCount()).toBe(filteredItemsCount); input.keyDown(KeyCode.left); expect(getItemsCount()).toBe(filteredItemsCount);

this would ensure that the item count stays the same when issuing left/right keypresses.

I would also include this test:

// do not set filtering input expect(getItemsCount()).toBe(collapsedItemsCount); // Make category item highlighted input.keyDown(KeyCode.down); input.keyDown(KeyCode.down); // Expands a group input.keyDown(KeyCode.right); expect(getItemsCount()).toBe(expandedItemsCount); // Collapses a group input.keyDown(KeyCode.left); expect(getItemsCount()).toBe(collapsedItemsCount);

to ensure the Left/Right works normally when filtering is used, but filter is empty.

I also found a bug, but not sure if it is related to the new changes. When expandable groups include more groups - the Left/Right does not work correctly.

In that case, pressing Left/Right does not close the open group once it is opened. It is also not possible to exit the expandable groups with keyboard nav anymore.

Screen.Recording.2026-06-25.at.09.56.15.mov

pan-kot · 2026-06-25T08:09:35Z

+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ButtonDropdownProps } from '../interfaces';
+import { filterItems } from '../utils/filter-items';


All these tests are technically possible to run from the component level: render button dropdown with certain items, set filtering - check the actual rendered items. Should we do this instead of testing the helper directly? This can give us better real coverage, as it not only ensures that the helper works, but also that it is used correctly by the component.

pan-kot · 2026-06-25T08:42:24Z

    expect(elementWrapper).toHaveTextContent('Custom');
  });

+  test('renders custom item content for link items', () => {


Why did we add this test? Is that also the expected behaviour? I find it strange that we still render a link when the item renderer is overridden.

amanabiy · 2026-06-26T09:02:58Z

  };

  const actOnParentDropdown = (event: React.KeyboardEvent) => {
-    // if there is no highlighted item we act on the trigger by opening or closing dropdown


Did the behavior change here? or we don't need the comment?

amanabiy · 2026-06-26T09:03:08Z

  const activate = (event: React.KeyboardEvent, isEnter?: boolean) => {
    setIsUsingMouse(false);

-    // if item is a link we rely on default behavior of an anchor, no need to prevent


Same, Did the behavior change here? or we don't need the comment?

amanabiy · 2026-06-26T09:11:04Z

  });

-  const { isOpen, closeDropdown, ...openStateProps } = useOpenState({ onClose: reset });
+  const prevFilteringValue = useRef(filteringValue);


Should we use usePrevious here?

const prevFilteringValue = usePrevious(filteringValue);

avinashbot deployed to dev-pages-react18 June 16, 2026 15:06 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react16 June 16, 2026 15:06 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react16 June 16, 2026 15:14 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react18 June 16, 2026 15:14 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react18 June 16, 2026 22:00 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react16 June 16, 2026 22:00 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react16 June 18, 2026 21:08 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react18 June 18, 2026 21:08 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react18 June 18, 2026 21:48 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react16 June 18, 2026 21:48 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react18 June 18, 2026 22:04 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react16 June 18, 2026 22:04 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react18 June 18, 2026 22:49 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react16 June 18, 2026 22:49 — with GitHub Actions View deployment

avinashbot force-pushed the feat/actions-search branch from 0d5d891 to 14e5718 Compare June 18, 2026 23:10

avinashbot deployed to dev-pages-react18 June 18, 2026 23:13 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react16 June 18, 2026 23:13 — with GitHub Actions View deployment

avinashbot force-pushed the feat/actions-search branch from 14e5718 to b0fd947 Compare June 18, 2026 23:29

avinashbot deployed to dev-pages-react16 June 18, 2026 23:32 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react18 June 18, 2026 23:32 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react16 June 19, 2026 10:03 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react18 June 19, 2026 10:03 — with GitHub Actions View deployment

avinashbot force-pushed the feat/actions-search branch 2 times, most recently from 042705d to 50e2c55 Compare June 23, 2026 16:07

avinashbot deployed to dev-pages-react18 June 23, 2026 16:10 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react16 June 23, 2026 16:10 — with GitHub Actions View deployment

avinashbot force-pushed the feat/actions-search branch from 50e2c55 to d5f7211 Compare June 24, 2026 10:57

avinashbot deployed to dev-pages-react18 June 24, 2026 11:00 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react16 June 24, 2026 11:00 — with GitHub Actions View deployment

avinashbot force-pushed the feat/actions-search branch from d5f7211 to e553244 Compare June 24, 2026 11:06

avinashbot deployed to dev-pages-react16 June 24, 2026 11:09 — with GitHub Actions View deployment

avinashbot deployed to dev-pages-react18 June 24, 2026 11:09 — with GitHub Actions View deployment

avinashbot marked this pull request as ready for review June 24, 2026 11:10

avinashbot requested a review from a team as a code owner June 24, 2026 11:10

avinashbot requested review from pan-kot and removed request for a team June 24, 2026 11:10

pan-kot reviewed Jun 24, 2026

View reviewed changes

pan-kot reviewed Jun 25, 2026

View reviewed changes

SpyZzey requested a review from amanabiy June 25, 2026 09:33

amanabiy reviewed Jun 26, 2026

View reviewed changes

Uh oh!

Conversation

avinashbot commented Jun 16, 2026 • edited by pan-kot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Correctness

Security

Testing

Uh oh!

codecov Bot commented Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pan-kot Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pan-kot Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pan-kot Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

avinashbot commented Jun 16, 2026 •

edited by pan-kot

Loading

codecov Bot commented Jun 16, 2026 •

edited

Loading

pan-kot Jun 25, 2026 •

edited

Loading

pan-kot Jun 25, 2026 •

edited

Loading

pan-kot Jun 25, 2026 •

edited

Loading