Cannot enter a link in the signature editor β input field unresponsive
Steps to reproduce
- Go to Settings > Signature in the Mail app.
- Click on the hyperlink icon to insert a link.
- 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.
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
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
Thank you for your report @piotrsz0772 and kudos on the debugging @chung03 π
@st3iny what do you think about the suggestions?
@st3iny?
Feels hacky but looks good.
Can you think of a better alternative? π