Semantic-ui-react: Input action does not work

[philliprognerud]

Steps to Reproduce
From your documentation from the Inputs section under the "actions" header. The code for copy input to clipboard does not work

Documentation: https://react.semantic-ui.com/elements/input#input-example-action-labeled-button

Expected
When button is clicked, user should expect input is copied into their clipboard and should be able to paste elsewhere

Result
Nothing happens on button click. Nothing is copied into clipboard.

Version
0.71.3

Testcase
Here is the test case that shows the issue: https://codepen.io/philliprognerud/pen/OjwBBv

[layershifter]

The main idea of this example is to show example markup and way to generate it, it should not be fully functional. For copy text you can you onClick handler and copy-to-clipboard package.

[rhapi]

To handle click, you need to create your custom "action" button.
<Input action={ <Button color='teal' icon='copy' content='Copy' onClick={ handleClick } />} defaultValue='Test input does not copy' style={{padding: "50px"}} />
This code works : https://codepen.io/anon/pen/VrGVob

[martisj]

@rhapi You don't need to create a "custom" action button. Seems like you can include an onClick inside the action parameter like so:
<Input action={{ color: 'teal', icon: 'copy', onClick: (e) => {handleClick} }} />

[levithomason]

For clarity, all shorthand props (like action) accept strings, numbers, props objects, or elements:

<Input action='My Action' />
<Input action={123} />
<Input action={{ content: 'My Action', onClick: this.handleClick }} />
<Input action={<Button content='My Action' onClick={this.handleClick} />} />

In all cases, the shorthand prop creates a new element. This API and behavior are the same for all shorthand props on all components.

[brianespinosa]

The example above is one we should include in the shorthand docs for #561