Fix option handling logic for legacy adater and update test to reflec…

…t the option with custom property scenario

packages/components/src/custom-select-control-v2/legacy-component/index.tsx

@@ -48,6 +48,7 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 				selectedItem: option!,
 				type: '',
 			};
+			debugger;
 			onChange( changeObject );
 		},
 	} );
@@ -131,7 +132,6 @@ export default CustomSelectControl;
 
 // for backwards compatibility
 export function ClassicCustomSelectControl( props: LegacyCustomSelectProps ) {
-	console.debug( props );
 	return (
 		<CustomSelectControl
 			{ ...props }

packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx

@@ -286,7 +286,7 @@ describe.each( [
 			expect.objectContaining( {
 				inputValue: '',
 				isOpen: false,
-				selectedItem: { key: 'violets', name: 'violets' },
+				selectedItem: { key: 'flower1', name: 'violets' },
 				type: '',
 			} )
 		);
@@ -302,8 +302,17 @@ describe.each( [
 			expect.objectContaining( {
 				inputValue: '',
 				isOpen: false,
+				// Some consumers don't use the value but expect the whole option object to be available and will access
+				// custom properties on it. Here's an example of such a consumer:
+				// - https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/font-appearance-control/index.js#L216
+				// This should only be supported for the legacy adapter, and when we change the implementation with the new V2 one, we will (ideally)
+				// also refactor consumers to not rely on custom properties, but only on the pre-defined key,value structure.
 				selectedItem: expect.objectContaining( {
 					name: 'aquamarine',
+					style: {
+						backgroundColor: 'rgb(127, 255, 212)',
+						rotate: '13deg',
+					},
 				} ),
 				type: '',
 			} )
@@ -328,7 +337,7 @@ describe.each( [
 		await type( 'p' );
 		await press.Enter();
 
-		expect( mockOnChange ).toHaveReturnedWith( 'poppy' );
+		expect( mockOnChange ).toHaveReturnedWith( 'flower1' );
 	} );
 
 	describe( 'Keyboard behavior and accessibility', () => {