Question

I am trying to find a way to keep selected text highlighted when a user activates a context menu (right-click menu) using Sencha’s EXT GWT 2.x (though I’m fine with a 3.x solution if there is one).

The use case:

1. User is viewing content on the screen.
2. User selects some block of text (and phrase for example).
3. User right-clicks to view the context menu so they may take action on the selected text and sees a context menu. The selected text remains selected when the menu appears.

In testing it appears that the GXT context menu automatically de-selects the text when the menu appears. Is there a way to prevent this and take action on the selected text?

So far I have tried:

a. Add a listener to the panel for the Context Menu event (Events.OnContextMenu) to see if there is a property that I can change (something like contextMenu.disableTextSelection(false) even though it was already set on construction of the view).

b. Overriding the de-select effect created by the appearance of the context menu by adding a native method to the same listener (Events.OnContextMenu) which then uses JS to try and grab the currently selected text, copy it to a temp variable, and then immediately add it back to the range on the page (effectively re-selecting the already selected text), but this didn’t work either. I was able to confirm that the native method fired, detected the text and appeared to drop it back into the range, but it seems that perhaps another event fires or some other action occurs which still clears the selection out before the menu appears.

Any ideas would be greatly appreciated.

Answer 1

I’m still not aware of an official solution and I am starting to think this is a bug in GXT 2.x but I was able to come up with a workaround and am posting it here in case someone else should run into a similar problem.

For starters, the issue appears to occur in Firefox and not in IE. For Firefox, the following worked (example code snippets after the summary):

1. Add a listener to the Events.OnContextMenu event on your component/container/panel/etc.
   • Override the handleEvent method and add a native method to use JS to detect if the user has selected text on the screen. If text is selected, save it off to a JavaScriptObject (opaque wrapper of JS objects provided by GWT, see GWT documentation for details).
2. Add a listener to the Events.Show event on the context menu object.
   • Override the handleEvent method and add a native method to use JS to re-select the previous selection.
3. Add a listener to the Events.Hide event on the context menu object.
   • Override the handleEvent method and clear our your selection variable and then run a native method to clear out any remaining selection (if desired).

Using these steps I was able to keep the text selected when making a context menu appear in Firefox.

Example Code
(these are just sample code blocks to help better illustrate the steps – a copy/paste of this code won’t give you everything you need)

public class ContextMenuExample {

    JavaScriptObject selection;
    Menu contextMenu = new Menu();

  public void buildPanelExample() {

    ContentPanel panel = new ContentPanel();  
    panel.addListener(Events.onContextMenu, new Listener<BaseEvent>() {
      if (!GXT.isIE) {
        selection = findSelectedTextOnScreen();
      }
    });

    contextMenu.addListener(Events.Show, new Listener<BaseEvent>() {
      if (!GXT.isIE) {
        reSelectText(selection);
      }
    });

    contextMenu.addListener(Events.Hide, new Listener<BaseEvent>() {
      if (!GXT.isIE) {
        clearSelection();
      }
    });

    private native JavaScriptObject findSelectedTextOnScreen() /*-{
      // use JS method to get selected text as a range
      return selectedText;
    }-*/;

    private native void reSelectedText(JavaScriptObject range) /*-{
      // use JS method to find a range a select it
    }-*/;

    private native void clearSelection() /*-{ 
      // us JS to clear any selected ranges 
    }-*/;

    private void clearSelections() {
      selection = null;
      clearSelection();
    }

  }
}