feat: Allow changing the value of copyable table dynamically. #1154

h2oai · Oct 24, 2022 · 02c8783 · 02c8783
1 parent 17a2fb1
commit 02c8783
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/ui/src/copyable_text.test.tsx b/ui/src/copyable_text.test.tsx
@@ -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')
+  })
+
 })
diff --git a/ui/src/copyable_text.tsx b/ui/src/copyable_text.tsx
@@ -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}