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

❌ Patch coverage is 97.87234% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 97.57%. Comparing base (902b5ad) to head (3371c37).

Files with missing lines	Patch %	Lines
src/button-dropdown/utils/use-button-dropdown.ts	94.11%	2 Missing ⚠️
src/button-dropdown/tooltip.tsx	94.11%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##             main    #4637    +/-   ##
========================================
  Coverage   97.57%   97.57%            
========================================
  Files         948      950     +2     
  Lines       30489    30603   +114     
  Branches    11148    11204    +56     
========================================
+ Hits        29749    29862   +113     
+ Misses        733      694    -39     
- Partials        7       47    +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: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

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

feat: Add filtering to button dropdown

0029b93

avinashbot force-pushed the feat/actions-search branch from e553244 to 9fb88b8 Compare June 26, 2026 14:55

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

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

avinashbot force-pushed the feat/actions-search branch from 9fb88b8 to 71b731a Compare June 26, 2026 15:02

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

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

Non-test review improvements.

3371c37

avinashbot force-pushed the feat/actions-search branch from 71b731a to 3371c37 Compare June 26, 2026 15:19

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

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

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!

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