diff --git a/changes/issue-14090-add-copied-message b/changes/issue-14090-add-copied-message new file mode 100644 index 0000000000..1db5a13294 --- /dev/null +++ b/changes/issue-14090-add-copied-message @@ -0,0 +1 @@ +- add "copied!" message to copy button on inputs diff --git a/frontend/components/forms/fields/InputField/InputField.jsx b/frontend/components/forms/fields/InputField/InputField.jsx index b6aa74a804..6d7236048f 100644 --- a/frontend/components/forms/fields/InputField/InputField.jsx +++ b/frontend/components/forms/fields/InputField/InputField.jsx @@ -60,6 +60,13 @@ class InputField extends Component { ignore1password: false, }; + constructor() { + super(); + this.state = { + copied: false, + }; + } + componentDidMount() { const { autofocus } = this.props; const { input } = this; @@ -121,8 +128,12 @@ class InputField extends Component { const copyValue = (e) => { e.preventDefault(); - - stringToClipboard(value); + stringToClipboard(value).then(() => { + this.setState({ copied: true }); + setTimeout(() => { + this.setState({ copied: false }); + }, 2000); + }); }; if (type === "textarea") { @@ -175,8 +186,8 @@ class InputField extends Component { autoComplete={blockAutoComplete ? "new-password" : ""} data-1p-ignore={ignore1password} /> -