Skip to content

Emote click does not insert into textarea unless textarea was clicked first #7

Description

@Jimmi08

Steps to reproduce

  1. Reload the chatbox page (fresh state, no prior interaction).
  2. Click the "Emotes" button. Panel opens with emote icons.
  3. Click any emote.

Expected

The emote tag (e.g. :)) is inserted into the message textarea at the
cursor position.

Actual

Nothing happens. The emote is not inserted. No error in the browser
console.

Workaround

Click into the message textarea first (give it focus / move the cursor),
then open the emote panel and click an emote. Emote inserts correctly.

After this first successful interaction, subsequent emote clicks work
normally — until the next page reload, when the bug returns.

Diagnosis

The emote panel HTML (returned by r_emote() in e107 core
core_functions.php) registers a click handler that calls
addtext(value, true):

$('.addEmote').click(function(){
    val = $(this).attr('data-emote')
    addtext(val, true);
    return false;
});

addtext() inserts text at a previously-stored cursor position, which is
saved by storeCaret(). The textarea has three inline event handlers
that call storeCaret():

If the user has not clicked, typed, or selected text in the textarea
before clicking an emote, storeCaret() has never run, no cursor
position is stored, and addtext() has nowhere to insert the emote — so
the call silently does nothing.

This is a pre-existing bug in the plugin, not a regression from any
recent change. It surfaced during testing of the markup cleanup PR
(#N — the menu-surface markup cleanup), which is unrelated to the
JavaScript event flow.

Verified that:

  • The click handler is correctly attached
    ($._data($('.addEmote')[0], 'events').click[0].handler shows the
    r_emote() handler)
  • The addtext function is loaded globally
    (typeof addtext returns "function")
  • Emote <a> elements have the addEmote class
    ($('.addEmote').length returns 28)

The chain works once storeCaret() has been called at least once.

Possible fixes

Several approaches, ordered from quickest to most thorough:

  1. Initialize cursor position when emote panel opens. Add a JS hook
    on the "Emotes" button click that calls storeCaret() on the
    textarea (or focuses the textarea) before showing the panel. Smallest
    change.

  2. Make addtext() self-sufficient. Change addtext() (in e107
    core) to fall back to "append at end" when no stored caret position
    exists. This is a core fix and benefits all plugins using the same
    pattern.

  3. Replace the legacy storeCaret/addtext pair with modern textarea
    APIs.
    setRangeText() and selectionStart/selectionEnd are
    widely supported. This belongs in the planned JS extraction PR
    (chatbox.js) rather than as a quick fix.

Recommended: defer the proper fix to the JS extraction PR, where the
inline onclick="storeCaret(this);" attributes are being removed
anyway. Until then, document the workaround.

Metadata

Metadata

Assignees

No one assigned

    Labels

    DONEbugSomething isn't working

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions