Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inline editor: Issues when the root element is a button #5098

Open
nikrolls opened this issue Jul 29, 2019 · 4 comments

Comments

@nikrolls
Copy link

commented Jul 29, 2019

What is the current behavior? Describe the bug
When tinymce inline is initialised on a button (the intent being to allow the button label to be edited) there are a few issues:

  1. The button's content is cleared when the editor is initialised
  2. Clicking on the editable area activates the button action
  3. Pressing spacebar while editing activates the button action and in some cases prevents the space from being inserted

Issue 1 seems to be resolved on Chrome by making a child span the root element, but this does not resolve issues 2 and 3 and completely breaks editing on Firefox. See http://fiddle.tinymce.com/LNgaab

What is the expected behavior?

  1. The button's content should not be cleared when the editor is initialised
  2. Clicking on the editable area should not activate the button action
  3. Pressing spacebar while editing should not activate the button action, and the space should be inserted

While issues 2 and 3 could arguably be the responsibility of the implementing developer, issue 1 is definitely a TinyMCE bug. Fixes for issues 2 and 3 would be nice as well - if and when a button is editable I would never expect it to be actually used as a button.

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE?

TinyMCE 5 Cloud (stable)
Tested on latest versions of Chrome, Firefox, and Edge on Windows 10.

@IamFonky

This comment has been minimized.

Copy link

commented Jul 30, 2019

<button type="button" class="mce" value="This seem to work"/>

Does this line help? It worked well for me on firefox

@nikrolls

This comment has been minimized.

Copy link
Author

commented Jul 31, 2019

Thanks @IamFonky. That would potentially work, but then that value will be submitted with the form. Buttons are meant to have content, and I'd like to edit that content rather than the value.

@lnewson

This comment has been minimized.

Copy link
Contributor

commented Jul 31, 2019

I can't comment on points 2 & 3 at this stage, as that'd need more investigation, but point 1) was actually fixed in 5.0.10 (see #4934). Here's a fiddle that uses cloud 5-dev instead of 5-stable, in which you can see the text content is retained: http://fiddle.tinymce.com/LNgaab/1

@nikrolls

This comment has been minimized.

Copy link
Author

commented Jul 31, 2019

Ah! Thank you @lnewson, I was clearly searching too narrowly.

Points 2 & 3 I have mitigated in my own code for now, with a preventDefault and an insert. Though it may be worth a discussion as to whether this should be handled by default (I'm sure other elements could benefit from it).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.