diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx index 626844355ae..b4d973f5d06 100644 --- a/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx +++ b/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx @@ -89,7 +89,7 @@ export interface ClipboardCopyProps extends Omit /** A function that is triggered on changing the text. */ onChange?: (event: React.FormEvent, text?: string) => void; /** The text which is copied. */ - children: string; + children: string | string[]; /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */ additionalActions?: React.ReactNode; /** Value to overwrite the randomly generated data-ouia-component-id.*/ @@ -103,7 +103,7 @@ class ClipboardCopy extends React.Component { if (prevProps.children !== this.props.children) { - const newText = this.props.children as string; + const newText = Array.isArray(this.props.children) + ? this.props.children.join(' ') + : (this.props.children as string); this.setState({ text: newText, textWhenExpanded: newText }); } }; diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx index 88221d26dcd..e7441dd2c03 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx @@ -336,6 +336,21 @@ test('Does not call onCopy when ClipboardCopyButton is not clicked', async () => expect(onCopyMock).not.toHaveBeenCalled(); }); +test('Can take array of strings as children', async () => { + const onCopyMock = jest.fn(); + const user = userEvent.setup(); + const childrenArray = children.split(' '); + + // sanity check to ensure we are checking an array with at least 2 elements + expect(childrenArray.length).toBeGreaterThan(1); + + render({childrenArray}); + + await user.click(screen.getByRole('button', { name: 'Test CCB clicker' })); + + expect(onCopyMock).toHaveBeenCalledWith(expect.any(Object), children); +}); + test('Matches snapshot', () => { const { asFragment } = render( diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap index 20c117ebdc8..6af3fd7f1e3 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap @@ -18,7 +18,7 @@ exports[`Matches snapshot 1`] = `