chore(dropdown): add split button action example #11753

Mash707 · 2025-04-10T18:00:49Z

Closes #10197
References:

Summary by CodeRabbit

Documentation
- Added a new section describing split-toggle patterns that combine a control with a dropdown, including guidance on focus restoration after item selection and an example usage.
New Features
- Added an example component demonstrating a dropdown with a split-button toggle and an integrated checkbox, showing open/close behavior, disabled/aria-disabled items, separators, and manual focus handling after selection.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Mash707 · 2025-04-10T18:02:50Z

@kmcfaul @thatblindgeye I have created a draft for the example. Let me know of the changes required.
Also could you guys also suggest the description and sub heading for the example, I am not sure of it. Thank You

patternfly-build · 2025-04-10T18:04:54Z

Preview: https://patternfly-react-pr-11753.surge.sh

A11y report: https://patternfly-react-pr-11753-a11y.surge.sh

Preview: https://pf-react-pr-11753.surge.sh

A11y report: https://pf-react-pr-11753-a11y.surge.sh

Mash707 · 2025-04-10T18:56:00Z

There were some a11y issues regarding MenuToggle and MenuToggleCheckbox since I didn't add aria-label to them.
@thatblindgeye do check the aria-labels once, I have added them for now so that the tests don't fail.

nicolethoen

Event handling is not quite ideal in this example.

In other dropdown examples, if I open the menu using the keyboard, i can hit tab and it will close the menu and put focus on the next focusable element on the page (in the docs, that's usually the button)

In the other dropdown examples, I can also click outside the menu and it will close the menu.

I think it's because this new example might be missing the 'onOpenChange' prop.

Mash707 · 2025-04-23T19:59:10Z

Yes, it was happening due to the missing onOpenChange prop. I have added it and now the menu is closing when clicking outside.

nicolethoen

I'm noticing that if I select an option from the menu (with they keyboard or my mouse) browser focus is not returned to the MenuToggle as it does in other examples.

I think you're also missing the shouldFocusToggleOnSelect prop

Mash707 · 2025-04-28T18:53:38Z

When adding the shouldFocusToggleOnSelect , it does not seem to work with splitButtonItems prop of the menu toggle. If I remove the splitButtonItems prop then it is working fine.
I also added splitButtonItems to others examples to test things out and it breaks them too.

thatblindgeye · 2025-04-28T19:34:35Z

Looks like it's because we're applying the innerref inside MenuToggle to that wrapper div instead of the toggle button:

patternfly-react/packages/react-core/src/components/MenuToggle/MenuToggle.tsx

Lines 200 to 202 in 31a4c28

    
           if (splitButtonItems) { 
        
             return ( 
        
               <div ref={innerRef as React.Ref<HTMLDivElement>} className={css(commonStyles, styles.modifiers.splitButton)}>

Since it's a plain div without any tabindex focus gets lost when trying to focus it, and we end up back at the top of the page when you Tab again. This PR is what added the ref to that div #8024 . @kmcfaul do you recall if we need to have the ref on this wrapper div? Moving it to the button toggle for the splitButtonItems return seems more accurate in this case, but can't remember if there was a specific reason.

An alternative would be possibly having to supply some custom focus logic in the example code, which consumers would then have to also implement.

kmcfaul · 2025-05-14T19:51:50Z

Yeah I think this may have been added to the wrong place, it seems like having it on the button would make more sense. I'm a little concerned whether this would count as a breaking change if people are referencing the split actions through the ref, but I think this is more of a bug fix. If we didn't want to change the ref location, we maybe could have the component change how it handles focus if splitActionItems is present and send focus back to the toggle button (like via querySelector getting the last button or have another ref applied to the toggle button).

kmcfaul · 2025-05-20T15:14:20Z

After discussing with the team, we should keep the ref on the div as is, and update Dropdown's logic to handle sending focus back to the toggle button via a querySelector (see the filter demos) for its default behavior.

github-actions · 2025-07-29T11:40:22Z

This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

github-actions · 2025-10-10T11:38:57Z

This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

thatblindgeye

From what I recall this is looking good, just couple things below

thatblindgeye · 2025-12-11T16:27:06Z

packages/react-core/src/components/Dropdown/examples/Dropdown.md

+
+### Split button
+
+Description of split button


@edonehoo would you mind taking a stab at quick verbiage here? Would be worth mentioning that the focus must be handled manually when shifting focus back to the toggle element after selecting an item (if the dropdown menu closes upon selection)

thatblindgeye · 2025-12-11T16:28:14Z

packages/react-core/src/components/Dropdown/examples/DropdownWithSplit.tsx

+    if (toggleRef.current) {
+      const toggleButton = toggleRef.current.querySelector('button[aria-expanded]');
+      if (toggleButton) {
+        (toggleButton as HTMLElement).focus();
+      }
+    }


Nit: we could remove a layer of nesting here by early returning is !toggleRef.current, or having toggleButton = toggleRef?.current?...

edonehoo · 2025-12-11T19:21:45Z

packages/react-core/src/components/Dropdown/examples/Dropdown.md


 ```
+
+### Split button


Suggested change

### Split button

### Split toggle with checkbox

to align with the language used in the menu toggle docs

edonehoo · 2025-12-11T19:29:51Z

packages/react-core/src/components/Dropdown/examples/Dropdown.md

+
+### Split button
+
+Description of split button


Suggested change

Description of split button

To combine a checkbox or other control with a dropdown menu, use a split button.

A `<MenuToggle>` can be rendered as a split button via `splitButtonItems`. Elements to be displayed before the dropdown toggle button (like the `<MenuToggleCheckbox>`) must be included in the `splitButtonItems`.

If the dropdown menu closes upon selection, you will need to manually shift focus back to the toggle element after a user selects an item from the menu.

wdyt about this?

🚢 it

@Mash707 if this looks good to you can you make this quick update?

Done 🚀🚀.

coderabbitai · 2025-12-11T20:12:49Z

Walkthrough

Adds a new split-button Dropdown example and corresponding docs: a React component DropdownSplitButtonText demonstrating a dropdown with a split toggle that includes a checkbox control, plus documentation describing usage and manual focus restoration after selection.

Changes

Cohort / File(s)	Summary
Documentation `packages/react-core/src/components/Dropdown/examples/Dropdown.md`	Imported `useRef`, added "Split toggle with checkbox" section describing combining a control with a dropdown via `splitButtonItems`, and referenced the `DropdownWithSplit.tsx` example.
New Component Implementation `packages/react-core/src/components/Dropdown/examples/DropdownWithSplit.tsx`	Added `DropdownSplitButtonText` export: a split-button dropdown example that manages `isOpen`, holds a menu toggle ref, restores focus to the toggle after selection, and includes a mix of action/link/disabled items (with a tooltip on aria-disabled item).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Review focus restoration logic and the MenuToggleElement ref usage.
Confirm splitButtonItems configuration and Dropdown API usage.
Ensure the aria-disabled + tooltip pattern is implemented accessibly.

Poem

🐰 I hopped in with a split-button cheer,
A checkbox tucked close, the menu near.
When items are chosen, I nudge focus back,
A tidy little hop along the UI track. 🥕

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding a split button action example to the Dropdown component documentation.
Linked Issues check	✅ Passed	The PR successfully ports the split button action Dropdown example from deprecated docs to new docs, fulfilling issue #10197 requirements.
Out of Scope Changes check	✅ Passed	All changes are scoped to adding the split button example documentation and component. The modifications to Dropdown.md and creation of DropdownWithSplit.tsx are directly aligned with the stated objective.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between aa7712c and 0d8177e.

📒 Files selected for processing (2)

packages/react-core/src/components/Dropdown/examples/Dropdown.md (2 hunks)
packages/react-core/src/components/Dropdown/examples/DropdownWithSplit.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

packages/react-core/src/components/Dropdown/examples/DropdownWithSplit.tsx
packages/react-core/src/components/Dropdown/examples/Dropdown.md

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: Build
GitHub Check: Build, test & deploy

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

edonehoo · 2025-12-15T18:18:18Z

packages/react-core/src/components/Dropdown/examples/Dropdown.md

+### Split toggle with checkbox
+
+To combine a checkbox or other control with a dropdown menu, use a split button.
+


Suggested change

A `<MenuToggle>` can be rendered as a split button via `splitButtonItems`. Elements to be displayed before the dropdown toggle button (like the `<MenuToggleCheckbox>`) must be included in the `splitButtonItems`.

If the dropdown menu closes upon selection, you will need to manually shift focus back to the toggle element after a user selects an item from the menu.

can you add these 2 lines too?

My bad. I totally missed it in the previous comment. Have added it now 🚀.

coderabbitai

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8928745 and aa7712c.

📒 Files selected for processing (2)

packages/react-core/src/components/Dropdown/examples/Dropdown.md (1 hunks)
packages/react-core/src/components/Dropdown/examples/DropdownWithSplit.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: Build, test & deploy
GitHub Check: Build

🔇 Additional comments (3)

packages/react-core/src/components/Dropdown/examples/Dropdown.md (1)

67-77: LGTM! Documentation clearly explains the pattern.

The documentation appropriately describes the split button pattern and the manual focus restoration requirement. The verbiage aligns with the team's consensus from the PR discussion.

packages/react-core/src/components/Dropdown/examples/DropdownWithSplit.tsx (2)

16-28: Focus restoration pattern correctly implements the team's consensus approach.

The onFocus function uses querySelector to find and focus the toggle button, which aligns with the team's decision documented in the PR objectives. This addresses the known issue where shouldFocusToggleOnSelect doesn't work with splitButtonItems.

The early return on line 17-19 addresses the previous review feedback to avoid nesting.

34-96: Well-structured example demonstrating split button pattern.

The component correctly implements:

Dual ref handling (lines 40-48) to support both the Dropdown's callback ref and the local useRef needed for focus restoration

Required accessibility labels on MenuToggle (line 52) and MenuToggleCheckbox (line 50) that satisfied the a11y tests per the PR comments

The onOpenChange handler (line 37) to sync external state changes, which was identified as missing in early PR feedback

A variety of dropdown item states (action, link, disabled, aria-disabled with tooltip, separated items) that provide a comprehensive example

packages/react-core/src/components/Dropdown/examples/DropdownWithSplit.tsx

edonehoo

looks good!

nicolethoen requested review from nicolethoen and thatblindgeye April 21, 2025 14:43

nicolethoen requested changes Apr 21, 2025

View reviewed changes

Mash707 force-pushed the dropdown-add-split-action-example branch from 6073673 to 6adca58 Compare April 23, 2025 19:57

Mash707 requested a review from nicolethoen April 23, 2025 19:59

nicolethoen requested changes Apr 28, 2025

View reviewed changes

Mash707 force-pushed the dropdown-add-split-action-example branch from 6adca58 to 4834e6d Compare May 29, 2025 15:28

github-actions bot added the Stale label Jul 29, 2025

nicolethoen removed the Stale label Aug 5, 2025

github-actions bot added the Stale label Oct 10, 2025

nicolethoen approved these changes Dec 11, 2025

View reviewed changes

nicolethoen removed the Stale label Dec 11, 2025

thatblindgeye reviewed Dec 11, 2025

View reviewed changes

thatblindgeye requested a review from edonehoo December 11, 2025 18:00

Mash707 added 6 commits December 11, 2025 23:30

chore(dropdown): add split button action example

7cf934b

added aria label

5d24223

added aria label

2529763

added aria labels

3aea271

added the onOpenChange prop

f85a178

added focus logic

c5ae0ff

remove unnecessary nesting

2d737dc

Mash707 force-pushed the dropdown-add-split-action-example branch from c4000d4 to 2d737dc Compare December 11, 2025 18:01

thatblindgeye approved these changes Dec 11, 2025

View reviewed changes

edonehoo reviewed Dec 11, 2025

View reviewed changes

update description and title

5a74246

thatblindgeye requested a review from edonehoo December 15, 2025 14:44

edonehoo reviewed Dec 15, 2025

View reviewed changes

update description

aa7712c

coderabbitai bot reviewed Dec 16, 2025

View reviewed changes

packages/react-core/src/components/Dropdown/examples/DropdownWithSplit.tsx Outdated Show resolved Hide resolved

update imports

0d8177e

thatblindgeye requested a review from edonehoo December 16, 2025 18:11

edonehoo approved these changes Dec 16, 2025

View reviewed changes

thatblindgeye merged commit 8c91c15 into patternfly:main Dec 17, 2025
14 checks passed

		### Split toggle with checkbox

		To combine a checkbox or other control with a dropdown menu, use a split button.


	A `<MenuToggle>` can be rendered as a split button via `splitButtonItems`. Elements to be displayed before the dropdown toggle button (like the `<MenuToggleCheckbox>`) must be included in the `splitButtonItems`.

	If the dropdown menu closes upon selection, you will need to manually shift focus back to the toggle element after a user selects an item from the menu.

chore(dropdown): add split button action example #11753

chore(dropdown): add split button action example #11753

Conversation

Mash707 commented Apr 10, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

Mash707 commented Apr 10, 2025

Uh oh!

patternfly-build commented Apr 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Mash707 commented Apr 10, 2025

Uh oh!

nicolethoen left a comment

Choose a reason for hiding this comment

Uh oh!

Mash707 commented Apr 23, 2025

Uh oh!

nicolethoen left a comment

Choose a reason for hiding this comment

Uh oh!

Mash707 commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thatblindgeye commented Apr 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kmcfaul commented May 14, 2025

Uh oh!

kmcfaul commented May 20, 2025

Uh oh!

github-actions bot commented Jul 29, 2025

Uh oh!

github-actions bot commented Oct 10, 2025

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

Uh oh!

thatblindgeye Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

thatblindgeye Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

edonehoo Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

edonehoo Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

thatblindgeye Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

Mash707 Dec 11, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot commented Dec 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

edonehoo Dec 15, 2025 • 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!

Mash707 Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

edonehoo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Mash707 commented Apr 10, 2025 •

edited by coderabbitai bot

Loading

patternfly-build commented Apr 10, 2025 •

edited

Loading

Mash707 commented Apr 28, 2025 •

edited

Loading

thatblindgeye commented Apr 28, 2025 •

edited

Loading

coderabbitai bot commented Dec 11, 2025 •

edited

Loading

edonehoo Dec 15, 2025 •

edited

Loading