CustomSelectControl: Use key to determine the selected item instead of name by arthur791004 · Pull Request #72189 · WordPress/gutenberg

arthur791004 · 2025-10-09T02:43:20Z

What?

If the options have duplicate name, then all of them will be shown as the selected item when any of them is selected. For example, if you have a list of the pages as below, and you want to use the CustomSelectControl, then it makes the result becomes weird.

const options = [
  {
    key: 0, // page.id
    name: 'Home', // page.title
  },
  {
    key: 1, // page.id
    name: 'Home', // page.title
  },
];

Why?

The "key" property should be the unique value in the options. As a result, we should use "key" to determine whether the item is selected to ensure there is only one selected item. Otherwise, if a list has options with the same name, all of them will be shown as selected item.

How?

Replace any condition that checks the selected item using its name property so that it instead uses the key property. The onChange event now passes the entire selectedItem, ensuring backward compatibility with no breaking changes

Testing Instructions

Storybook

Navigate to CustomSelectControl
Select different item
Ensure it works as before

Editor

Open a post
Select any block
Change the font
Ensure it works as before

Testing Instructions for Keyboard

Screenshots or screencast

Before	After

github-actions · 2025-10-09T02:50:06Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: arthur791004 <arthur791004@git.wordpress.org>
Co-authored-by: aduth <aduth@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2025-10-09T13:57:43Z

Flaky tests detected in 0bec13d.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/19122253270
📝 Reported issues:

[Flaky Test] should select the wrapper div for a group #71211 in /test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js

aduth

This change makes sense to me 👍 It's also more consistent with documented examples. It might be nice to include a regression test for what we're trying to fix here.

aduth · 2025-11-03T16:40:16Z

packages/components/src/custom-select-control/index.tsx

-				renderSelectedValue={
-					showSelectedHint ? renderSelectedValueHint : undefined
-				}


Why did we change the logic here? It seemed like this was a simplification to avoid rendering the <Styled.SelectedExperimentalHintWrapper> wrapper if we don't intend to show the selected hint?

We now need the render function because the value becomes the key of the options. I pushed changes to avoid rendering the wrapper by a0f4a6e.

aduth · 2025-11-03T16:41:27Z

packages/components/src/custom-select-control/index.tsx

 			<VisuallyHidden>
 				<span id={ descriptionId }>
-					{ getDescribedBy( currentValue, describedBy ) }
+					{ getDescribedBy( selectedOption.name, describedBy ) }


Minor: The function argument is still named currentValue even though we're passing the name here, which could be confusing with how we're now associating "value" with "key" elsewhere (and key not being the same as name).

gutenberg/packages/components/src/custom-select-control/index.tsx

Line 46 in 1554f1c

function getDescribedBy( currentValue: string, describedBy?: string ) {

Renamed to currentName by 516f9d1

aduth · 2025-11-04T13:05:22Z

packages/components/src/custom-select-control/index.tsx

-				{ currentValue }
-				{ selectedOptionHint && (
+				{ selectedOption.name }
+				{ showSelectedHint && selectedOption.hint && (


With the changes in 516f9d1, this code could never be reached without the condition being satisfied, right?

Suggested change

{ showSelectedHint && selectedOption.hint && (

Forgot to remove it 🤦‍♂️ Done by 434b6c7.

…f name

aduth · 2025-11-05T21:27:34Z

packages/components/src/custom-select-control/index.tsx

+
+	const renderSelectedValue = () => {
+		if ( ! showSelectedHint || ! selectedOption.hint ) {
+			return selectedOption.name;


I'm surprised that TypeScript doesn't raise an issue here, since I think selectedOption could be undefined if the options array is empty (i.e. options[ 0 ] would be undefined if options is an empty array). It'd be pretty unconventional usage, but we're doing safe property access above, so maybe we should here as well:

gutenberg/packages/components/src/custom-select-control/index.tsx

Line 116 in 434b6c7

defaultValue: options[ 0 ]?.key,

Oh yes, you're right! Fixed by 0bec13d.

This is because:

For an array type T[], TypeScript defines the indexed access type T[]["0"] as simply T.

It doesn't try to analyze if the array could be empty at runtime.

So it trusts that "options is an array of T, so options[0] is of type T".

We have to enable below to force TS raises the value is probably undefined.

{ "compilerOptions": { "noUncheckedIndexedAccess": true } }

Nice sleuthing, that makes sense.

I think that TypeScript option could make sense to enable, though I might fear it could introduce a whole bunch of new issues to work through.

aduth

LGTM

arthur791004 · 2025-11-07T02:56:07Z

Thanks for the review!

arthur791004 requested a review from ajitbohra as a code owner October 9, 2025 02:43

arthur791004 self-assigned this Oct 9, 2025

arthur791004 requested review from brookewp and yogeshbhutkar October 9, 2025 02:43

arthur791004 mentioned this pull request Oct 9, 2025

Performance v2: Use CustomSelect for the PageSelector Automattic/wp-calypso#106329

Merged

9 tasks

arthur791004 added the [Type] Bug An existing feature does not function as intended label Oct 9, 2025

t-hamano added the [Package] Components /packages/components label Oct 9, 2025

arthur791004 force-pushed the fix/custom-select-active-item branch from 131df7a to 416d16c Compare October 9, 2025 13:25

mirka requested a review from a team November 1, 2025 04:01

aduth approved these changes Nov 3, 2025

View reviewed changes

arthur791004 force-pushed the fix/custom-select-active-item branch from 416d16c to a0f4a6e Compare November 4, 2025 06:07

aduth reviewed Nov 4, 2025

View reviewed changes

arthur791004 added 5 commits November 5, 2025 12:47

CustomSelectControl: Use key to determine the selected item instead o…

66a2e01

…f name

Changelog

d04bec3

Rename currentValue to curentName

7abe6d4

Don't render SelectedExperimentalHintWrapper if the hint is not provided

865faab

Remove dead code

434b6c7

arthur791004 force-pushed the fix/custom-select-active-item branch from a04c490 to 434b6c7 Compare November 5, 2025 04:48

aduth reviewed Nov 5, 2025

View reviewed changes

Fix the default option may be undefined

0bec13d

aduth approved these changes Nov 6, 2025

View reviewed changes

arthur791004 merged commit 400815b into trunk Nov 7, 2025
39 checks passed

arthur791004 deleted the fix/custom-select-active-item branch November 7, 2025 02:55

github-actions bot added this to the Gutenberg 22.1 milestone Nov 7, 2025

Conversation

arthur791004 commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Uh oh!

github-actions bot commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aduth left a comment

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!

arthur791004 Nov 5, 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!

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!

aduth left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

arthur791004 commented Nov 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

arthur791004 commented Oct 9, 2025 •

edited

Loading

github-actions bot commented Oct 9, 2025 •

edited

Loading

github-actions bot commented Oct 9, 2025 •

edited

Loading

arthur791004 Nov 5, 2025 •

edited

Loading