0

How can I preserve input (text) selection when opening a popup

asked 2013-11-27 15:22:55 +0800

acostache gravatar image acostache
3 1

Hi,

I am quite new to ZK, so I apologize in advance if my question is not as clear as necessary (I might mix up some terms).

My scenario is simple: I have an input field, in which I have some text entered, which gets selected on focus (via an event listener). When I right-click inside the field, I have a popup which opens (a popup is set as the input field's context) and that allows me to perform operations on the input field and others.

My problem is: I would like to preserve the selection on the text when right-clicking inside the field and opening the popup. My code is something like this:

inputElement.addEventListener(Events.ON_FOCUS, new EventListener<Event>() {       
 public void onEvent(Event event) throws Exception {
  ((InputElement)event.getTarget()).select();
 }
});

inputElement.addEventListener(Events.ON_RIGHT_CLICK, new EventListener<Event>() {       
 public void onEvent(Event event) throws Exception {
  //((InputElement)event.getTarget()).select();
  mypopup.open((InputElement)event.getTarget());
 }
});

This unfortunately seems not possible. I have tried (as is commented in the right-click event handler) to force the selection. I know I can't have the popup and the right-click handler working simultaneously (I saw an issue with ZK saying it's like this by design). I also know that there is a property which seems to be what I want, but only for Listbox and Tree: the org.zkoss.zul.*.rightSelect property/attribute.

I am looking to find a Java solution for this if possible, or maybe a property configured/attributed added. Any help is much appreciated.

Best regards and thanks in advance, Andrei

delete flag offensive retag edit

Comments

@Robert @cor3000 I can't seem to reply on your answer (can't even upvote it) but, yes, your solution works - thank you! :) do you have any idea how that could be done using Java, on the server side?

acostache ( 2013-11-28 11:36:24 +0800 )edit

yes it is possible (in fact option 1 and 2 use zcripts triggered via ajax on the serverside, the same can be achieved by listening to the events on the serverside like you did), I can create some running example of any version, which do you prefer: option 1, 2 or 3? all are possible...

cor3000 ( 2013-11-29 01:09:33 +0800 )edit

@cor3000 if possible, option1: i think my sample workaround is similar to that, but i am sure i must be missing something. thank you very much for all the support

acostache ( 2013-11-29 07:30:51 +0800 )edit

@cor3000 Thank you Robert for your answers and help. Your Java code also works nice; but I am still wondering (learning ZK :) ) why my scenario did not fully work, as it seems equivalent (with that event handling difference on your side).

acostache ( 2013-12-02 14:51:22 +0800 )edit

the only difference I see is, that the onOpen event is called later, so there is less happening being changed in the dom after I reselect the textbox content, i simply reduce the chance of a side effect.

cor3000 ( 2013-12-04 01:17:54 +0800 )edit

2 Answers

Sort by ยป oldest newest most voted
0

answered 2013-12-02 03:42:20 +0800

cor3000 gravatar image cor3000
6280 2 7

updated 2013-12-09 03:30:47 +0800

Hi again,

in this example on ZK fiddle you'll find the previous example including a Java only equivalent of Option 1 (for the components with IDs textboxJava / mypopJava). The difference to your attempt is that I use the onOpen event of the context menu to select the text.

You'll also notice that I used the @Subscribe annotations instead of the dynamic addEventListener() that you are using. Both ways should have the same result. I just find the annotation way more convenient and easier to read/maintain, unless I need to add/remove the event listeners dynamically.

Regards, Robert

link publish delete flag offensive edit
0

answered 2013-11-28 09:04:47 +0800

cor3000 gravatar image cor3000
6280 2 7

updated 2013-11-28 09:06:26 +0800

Hi Andrei,

the whole topic seems to be very browser specific just have a look at this discussion at stackoverflow

So tried to make your "workaround work", and I also found browser specific behaviors... while option 1 seemed to be most stable across browsers.

<zk xmlns:w="client">
    using ServerSide Event listener
    <textbox id="t1" onFocus="self.select()" value="option 1" context="mypop" />
    <textbox id="t2" onFocus="self.select()" value="option 2" onRightClick="mypop.open(self)" />

    using ClientSide Event listeners
    <textbox id="t3" w:onFocus="this.select()" value="option 3" context="mypop2" />

    <!-- listen to onOpen on the server side -->
    <popup id="mypop" onOpen="if(event.open) event.reference.select();">
        <div>Hello some content</div>
    </popup>

    <!-- listen to onOpen on the client side note the "w:" -->
    <popup id="mypop2" w:onOpen="if(event.open) event.reference.select();">
        <div>Hello some content</div>
    </popup>
</zk>

I hope you can find some of this useful... if not let me know.

Robert

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2013-11-27 15:22:55 +0800

Seen: 30 times

Last updated: Dec 09 '13

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More