Commit b31878aeeaf for woocommerce

commit b31878aeeafa6ff19b67132c0f088ef87fbba1b9
Author: Daniel Mallory <daniel.mallory@automattic.com>
Date:   Wed May 27 14:43:21 2026 +0100

    Fix WooPayments onboarding business type dropdown crash (#65336)

    Fix WooPayments onboarding select crash

diff --git a/plugins/woocommerce/changelog/fix-woopayments-onboarding-select-crash b/plugins/woocommerce/changelog/fix-woopayments-onboarding-select-crash
new file mode 100644
index 00000000000..ec100bb8358
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-woopayments-onboarding-select-crash
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix WooPayments onboarding business type dropdown crash.
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/components/custom-select-control/index.tsx b/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/components/custom-select-control/index.tsx
index bc830ce64b1..e3cc2dcc88d 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/components/custom-select-control/index.tsx
+++ b/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/components/custom-select-control/index.tsx
@@ -42,44 +42,6 @@ export interface ControlProps< ItemType > {
 }

 const itemToString = ( item: { name?: string } | null ) => item?.name || '';
-// This is needed so that in Windows, where
-// the menu does not necessarily open on
-// key up/down, you can still switch between
-// options with the menu closed.
-const stateReducer = (
-	{ selectedItem }: any, // eslint-disable-line @typescript-eslint/no-explicit-any
-	{ type, changes, props: { items } }: any // eslint-disable-line @typescript-eslint/no-explicit-any
-) => {
-	switch ( type ) {
-		case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
-			// If we already have a selected item, try to select the next one,
-			// without circular navigation. Otherwise, select the first item.
-			return {
-				selectedItem:
-					items[
-						selectedItem
-							? Math.min(
-									items.indexOf( selectedItem ) + 1,
-									items.length - 1
-							  )
-							: 0
-					],
-			};
-		case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
-			// If we already have a selected item, try to select the previous one,
-			// without circular navigation. Otherwise, select the last item.
-			return {
-				selectedItem:
-					items[
-						selectedItem
-							? Math.max( items.indexOf( selectedItem ) - 1, 0 )
-							: items.length - 1
-					],
-			};
-		default:
-			return changes;
-	}
-};

 function CustomSelectControl< ItemType extends Item >( {
 	name,
@@ -106,7 +68,6 @@ function CustomSelectControl< ItemType extends Item >( {
 		itemToString,
 		onSelectedItemChange,
 		selectedItem: value || ( {} as ItemType ),
-		stateReducer,
 	} );

 	const itemString = itemToString( selectedItem );
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/components/custom-select-control/test/index.test.tsx b/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/components/custom-select-control/test/index.test.tsx
new file mode 100644
index 00000000000..2d0510e5503
--- /dev/null
+++ b/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/components/custom-select-control/test/index.test.tsx
@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import CustomSelectControl from '..';
+
+const options = [
+	{ key: 'individual', name: 'Individual' },
+	{ key: 'company', name: 'Company' },
+];
+
+describe( 'CustomSelectControl', () => {
+	it( 'opens the options menu when the toggle button is clicked', () => {
+		render(
+			<CustomSelectControl
+				label="Business type"
+				options={ options }
+				placeholder="Select an option"
+			/>
+		);
+
+		fireEvent.click(
+			screen.getByRole( 'combobox', { name: 'Business type' } )
+		);
+
+		expect( screen.getByText( 'Individual' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Company' ) ).toBeInTheDocument();
+	} );
+
+	it( 'selects the highlighted option when navigating with keyboard commands', () => {
+		const onChange = jest.fn();
+
+		render(
+			<CustomSelectControl
+				label="Business type"
+				options={ options }
+				onChange={ onChange }
+				placeholder="Select an option"
+				value={ options[ 0 ] }
+			/>
+		);
+
+		const select = screen.getByRole( 'combobox', {
+			name: 'Business type',
+		} );
+
+		fireEvent.keyDown( select, { key: 'ArrowDown' } );
+		fireEvent.keyDown( select, { key: 'ArrowDown' } );
+		fireEvent.keyDown( select, { key: 'Enter' } );
+
+		expect( onChange ).toHaveBeenLastCalledWith(
+			expect.objectContaining( {
+				selectedItem: options[ 1 ],
+			} )
+		);
+	} );
+} );