Merge pull request #5871 from cgmonte/add-otherProps-to-PickerOption

feat: Allow props prefixed by "data-" to be rendered as attributes in picker's option elements

packages/clay-core/src/picker/Option.tsx

@@ -57,6 +57,12 @@ type Props = {
 	 */
 	keyValue?: React.Key;
 
+	/**
+	 * Internal property.
+	 * @ignore
+	 */
+	index?: number;
+
 	/**
 	 * Sets a text value if the component's content is not plain text. This value
 	 * is used in the combobox element to show the selected option.
@@ -72,8 +78,10 @@ export function Option({
 	'aria-setsize': ariaSetSize,
 	children,
 	disabled,
+	index: _index,
 	keyValue,
 	textValue,
+	...otherProps
 }: Props) {
 	const {
 		activeDescendant,
@@ -95,6 +103,7 @@ export function Option({
 	if (isMobile) {
 		return (
 			<option
+				{...otherProps}
 				aria-describedby={ariaDescribedby}
 				disabled={disabled}
 				value={keyValue}
@@ -107,6 +116,7 @@ export function Option({
 	return (
 		<li role="presentation">
 			<button
+				{...otherProps}
 				{...hoverProps}
 				aria-describedby={ariaDescribedby}
 				aria-label={ariaLabel}

packages/clay-core/src/picker/__tests__/BasicRendering.tsx

@@ -5,6 +5,7 @@
 
 import Icon from '@clayui/icon';
 import {cleanup, render} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import {Option, Picker} from '../../';
@@ -208,4 +209,22 @@ describe('Picker basic rendering', () => {
 		expect(selectedValue.getAttribute('aria-expanded')).toBe('false');
 		expect(selectedValue.getAttribute('tabindex')).toBe('0');
 	});
+
+	it('render option with a custom attribute prefixed by "data-"', () => {
+		const {getByRole} = render(
+			<Picker>
+				<Option data-attribute="data-attribute-value" />
+			</Picker>
+		);
+
+		const combobox = getByRole('combobox');
+
+		userEvent.click(combobox);
+
+		const option = getByRole('option');
+
+		expect(option.getAttribute('data-attribute')).toBe(
+			'data-attribute-value'
+		);
+	});
 });