Edit button text in Firefox and IE

[hamzaw]

Hi,

First of all I absolutely love Content Tools - thank you so much for creating and supporting it.

I have this HTML markup to allow editable button text. It works 100% in Chrome but not in Firefox or IE. Any ideas why? Is there something I can change in the HTML or is there an issue in Content Tools itself?

<button class="btn btn-primary btn-lg btn-edit-color" type="button" id="btn-submit">
  <div data-editable>
    <p>
      EDIT THIS BUTTON TEXT
    </p>
  </div>
</button>

Thanks!

[anthonyjb]

Hi @hamzaw,

Can you provide some details of the issue your experiencing? When you say it doesn't work in Firefox or IE do you mean you can't edit the button in those browsers?

[hamzaw]

Hi @anthonyjb

Sorry - yes, you cannot select the text or edit it. When you click on the text it just clicks the button.

On Chrome and Safari when you click the button you can select the text and edit it.

[hamzaw]

Any update on this please?

[anthonyjb]

Hi @hamzaw - I believe the issue is that CT is failing to receive the click/mousedown event for the inner content of the button on FF and IE (presumably because the button component catches these events and doesn't parse them on - https://stackoverflow.com/questions/23275749/firefox-button-child-span-and-li-not-clickable-or-hoverable), and therefore it never converts the contents to be editable on click.

There may well be a way around this and I will look further but one short term solution to:

• Listen for the editor start event
• When the editor starts replace the button tag(s) with a div tag(s) the CSS should ensure this makes no visual change.
• The editable content will the be parsed and will reside within a div tag which doesn't cause any issues.
• Listen for the editor stop event
• Convert the relevant div tags back to buttons tags.