Skip to content

Commit

Permalink
feat: Allow changing the value of copyable table dynamically. #1154
Browse files Browse the repository at this point in the history
  • Loading branch information
mturoci committed Oct 24, 2022
1 parent 17a2fb1 commit 02c8783
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 1 deletion.
9 changes: 9 additions & 0 deletions ui/src/copyable_text.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,13 @@ describe('CopyableText.tsx', () => {
const { queryByTestId } = render(<XCopyableText model={copyableTextProps} />)
expect(queryByTestId(name)).toBeInTheDocument()
})

it('Display new value when "value" prop changes', () => {
const { getByTestId, rerender } = render(<XCopyableText model={{ ...copyableTextProps, value: 'A' }} />)
expect(getByTestId(name).querySelector('input')).toHaveValue('A')

rerender(<XCopyableText model={{ ...copyableTextProps, value: 'B' }} />)
expect(getByTestId(name).querySelector('input')).toHaveValue('B')
})

})
2 changes: 1 addition & 1 deletion ui/src/copyable_text.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const XCopyableText = ({ model }: { model: CopyableText }) => {

return (
<div data-test={name} className={multiline ? css.multiContainer : css.compactContainer}>
<Fluent.TextField componentRef={ref} defaultValue={value} label={label} multiline={multiline} styles={{ root: { width: pc(100) } }} readOnly />
<Fluent.TextField componentRef={ref} value={value} label={label} multiline={multiline} styles={{ root: { width: pc(100) } }} readOnly />
<Fluent.PrimaryButton
title='Copy to clipboard'
onClick={onClick}
Expand Down

0 comments on commit 02c8783

Please sign in to comment.