diff --git a/ghost/admin/app/components/posts/links-table.hbs b/ghost/admin/app/components/posts/links-table.hbs
index 5f99136533..523f27cb9d 100644
--- a/ghost/admin/app/components/posts/links-table.hbs
+++ b/ghost/admin/app/components/posts/links-table.hbs
@@ -35,24 +35,31 @@
placeholder={{link.link.to}}
value={{link.link.to}}
maxlength="300"
- {{on "blur" this.setLink}}
- {{on-key "Enter" this.blurElement}}
+ {{on "input" this.updateLinkValue}}
+ {{on "blur" this.handleBlur}}
+ {{on-key "Enter" this.setLink}}
{{on-key "Escape" this.cancelEdit}}
{{autofocus}}
data-prevent-escape-close-modal="true"
/>
{{#if (eq this.showError link.link.link_id)}}
-
+
{{else}}
-
+
{{/if}}
Please enter a valid link
diff --git a/ghost/admin/app/components/posts/links-table.js b/ghost/admin/app/components/posts/links-table.js
index 4c1a912b09..ac9be92e9d 100644
--- a/ghost/admin/app/components/posts/links-table.js
+++ b/ghost/admin/app/components/posts/links-table.js
@@ -10,32 +10,40 @@ export default class LinksTable extends Component {
@tracked editingLink = null;
@tracked showError = null;
+ @tracked _linkValue = '';
@action
- blurElement(event) {
- if (!event.shiftKey) {
- event.preventDefault();
- event.target.blur();
+ handleBlur(event) {
+ event?.preventDefault();
+ if (!event?.relatedTarget?.matches('.gh-links-list-item-update-button')) {
+ this.cancelEdit();
}
}
@action
editLink(linkId) {
this.editingLink = linkId;
+ const linkTo = this.links.find(link => link.link.link_id === linkId)?.link?.to;
+ this._linkValue = linkTo || '';
}
@action
cancelEdit(event) {
- event.preventDefault();
+ event?.preventDefault();
this.editingLink = null;
this.showError = null;
}
+ @action
+ updateLinkValue(event) {
+ this._linkValue = event.target.value;
+ }
+
@action
setLink(event) {
- event.preventDefault();
+ event?.preventDefault();
try {
- const newUrl = new URL(event.target.value);
+ const newUrl = new URL(this._linkValue);
const linkObj = this.links.find((_link) => {
return _link.link.link_id === this.editingLink;
});
@@ -50,25 +58,6 @@ export default class LinksTable extends Component {
}
}
- @task
- *updateLinks() {
- try {
- const newUrl = new URL(event.target.value);
- const linkObj = this.links.find((_link) => {
- return _link.link.link_id === this.editingLink;
- });
- // Only call update if the new link is different from current link
- if (linkObj.link.to !== newUrl.href) {
- yield this.args.updateLinkTask.perform(this.editingLink, newUrl.href);
- }
- this.editingLink = null;
- this.showError = null;
- return true;
- } catch (e) {
- this.showError = this.editingLink;
- }
- }
-
get links() {
return this.args.links;
}
diff --git a/ghost/admin/app/components/posts/old-analytics.hbs b/ghost/admin/app/components/posts/old-analytics.hbs
index 8642832fb5..08fb739a98 100644
--- a/ghost/admin/app/components/posts/old-analytics.hbs
+++ b/ghost/admin/app/components/posts/old-analytics.hbs
@@ -100,7 +100,6 @@
{{/if}}
diff --git a/ghost/admin/app/styles/layouts/content.css b/ghost/admin/app/styles/layouts/content.css
index 562d7b70eb..1b272ef3cc 100644
--- a/ghost/admin/app/styles/layouts/content.css
+++ b/ghost/admin/app/styles/layouts/content.css
@@ -1177,6 +1177,10 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
display: inline;
}
+.gh-links-list-item-update-button span {
+ pointer-events: none;
+}
+
@keyframes fade-in-out {
0% { opacity: 0; }
20% { opacity: 1 }