Semantic-ui-react: Unclear Input action API

[cdaringe]

Steps

• browse to the docs site
• select Input
• read the action api docs

Expected Result

• knowledge on how to use an action and/or <Icon /> whilst attaching addition attrs/props to it (e.g. onClick, className, etc)

Actual Result

• docs on how to use an <Icon /> without attaching any other attrs

Version

0.71.3

Testcase

https://codepen.io/cdaringe/pen/YxZyPR

mentioned in chat, sans any real discussion: https://gitter.im/Semantic-Org/Semantic-UI-React?at=5988b080bc464729746030e4

[cdaringe]

actually, i found that onClick seems to be honored in the action API. is it stable/safe to use?

[layershifter]

@cdaringe Semantic UI accepts only button as action, that's why your first Input looks ugly.

The action prop on Input implements a shorthand for Button, so code below is equal:

<Input action={<Button icon='delete' onClick={onIconClick} />} />
<Input action={{ icon: 'delete', onClick: onIconClick }} />

Shorthands should be better documented and issue already exists #561.

[cstrat]

@layershifter thanks, this was a little unclear to me but it all makes sense now. the documentation could be clearer on this.

[pranay414]

How do I pass the value entered in Input and handle it with the help of Button?

[layershifter]

Please use StackOverflow to usage questions.