mail icon indicating copy to clipboard operation
mail copied to clipboard

Cannot enter a link in the signature editor β€” input field unresponsive

Open piotrsz0772 opened this issue 9 months ago β€’ 5 comments

Steps to reproduce

  1. Go to Settings > Signature in the Mail app.
  2. Click on the hyperlink icon to insert a link.
  3. Try to type a URL into the input field.

Expected behavior

You should be able to type or paste a URL into the field and confirm it. The link should be inserted into the signature.

Actual behavior

Clicking the hyperlink icon opens the link input popup, but the input field is completely unresponsive β€” no typing is possible, and the field doesn’t react at all. Nothing can be entered.

Image

Mail app version

4.3.5

Nextcloud version

31.0.2

Mailserver or service

No response

Operating system

No response

PHP engine version

None

Nextcloud memory caching

No response

Web server

None

Database

None

Additional info

No response

piotrsz0772 avatar Apr 07 '25 14:04 piotrsz0772

This is because the input fields created by the Link plugin for ckeditor is not added to the focus trap. I actually fixed this bug in my own version of the mail app:

------------------------ src/components/TextEditor.vue ------------------------
@@ -399,8 +399,24 @@ export default {
 					this.$emit('mention', { email: item.email[0], label: item.label })
 				}
 			}, { priority: 'high' })

+			// Try to add all elements created by the Link plugin to the focus trap
+			// Add link form listener
+			this.linkUIPluginInstance = editor.plugins.get('LinkUI')
+			this.isLinkUIFormViewInFocusTrap = false;
+
+			editor.model.document.on( 'change', (eventInfo , batch) => {
+				// Only add the Link UI Form View to the focus trap if it is not already added
+				if(this.linkUIPluginInstance.formView != null && !this.isLinkUIFormViewInFocusTrap)
+				{
+					this.$emit('show-toolbar', this.linkUIPluginInstance.formView.urlInputView.fieldView.element);
+					this.isLinkUIFormViewInFocusTrap = true;
+				}
+				else if(this.linkUIPluginInstance.formView == null && this.isLinkUIFormViewInFocusTrap)
+				{
+					this.isLinkUIFormViewInFocusTrap = false;
+				}
+			} );

Basically, this change adds the input element created by Link UI to the focus trap. This allows the browser to focus on the input, and then the user can interact with the input field. This is a rough solution and needs some cleanup, though

chung03 avatar Apr 08 '25 02:04 chung03

Thank you for your report @piotrsz0772 and kudos on the debugging @chung03 πŸ™

@st3iny what do you think about the suggestions?

ChristophWurst avatar Apr 14 '25 08:04 ChristophWurst

@st3iny?

ChristophWurst avatar May 27 '25 12:05 ChristophWurst

Feels hacky but looks good.

st3iny avatar May 27 '25 12:05 st3iny

Can you think of a better alternative? πŸ˜…

ChristophWurst avatar May 27 '25 13:05 ChristophWurst