0

Textbox onFocus loses focus

asked 2022-09-20 09:23:32 +0800

stephenbyers gravatar image stephenbyers
1

I have a textbox with an onFocus @command and also a @bind. When I click into it, my function gets called but it loses focus so the user can't type anything in.

How can I keep its focus?

I have an example here:

zkfiddle.org/sample/1v9perr/3-Textbox-loses-focus-with-onFocus

Thanks in advance!

delete flag offensive retag edit

2 Replies

Sort by ยป oldest newest

answered 2022-09-20 16:50:43 +0800

MDuchemin gravatar image MDuchemin
2298 1 5
ZK Team

Hey there.

You are correct, but there is more to it than just focus. Your command calls a notify change on "vm.elements" vm.elements is used as children binding for the rows: <rows children="@load(vm.elements)">

That means that whenever your trigger notify change on this vm.elements, the rows content will be destroyed, then the binder will evaluate the content of the vm.elements collection and recreate the content of <rows> based on the new data.

As a result, you don't loose focus on your existing textbox, your loose your existing textbox entirely, which is replaced by a new identical instance.

The question is, what are you trying to do, and is there a better way to achieve it :)

First, I'd suggest using model binding instead of binding on rows children. By using <grid model="@init(vm.elements)"> you can use model binding on the grid itself. There are benefits to this: - first, you can use a ListModelList instead of a regular List. ListModelList takes care of updating new and removed elements for you (and a number of other quality of life behaviors as well) - 2nd, you can use a @init binding instead of a @load binding. The listmodellist takes care of notifications on its content, so you never need to replace "the whole list". Instead you can notify granularly on items you want to update.

Then, you'll want to make sure that you are doing your bindings as granular as you can. For example, when you change a string in the model, you don't need to redraw the entire list. you don't even need to redraw a single textbox. If you bind granularly onto textbox "value" field, you can do the "least possible work" when updating, which is to just change the value on an existing component.

A good way to isolate values from "model row" is to encapsulate your value in a data bean. That way, you can call BindUtils.postNotifyChange on the bean you want to update (for the fields you want to update only). This allow you to decouple the data structure (the rows in the model) from the communication with the binder (which fields of which data beans you need to update at a given time on the client)

Here's an updated sample that applies these principles: https://zkfiddle.org/sample/1v9perr/11-Textbox-loses-focus-with-onFocus

link publish delete flag offensive edit

answered 2022-09-20 22:54:46 +0800

stephenbyers gravatar image stephenbyers
1

This was very helpful -- thanks for the thorough response.

link publish delete flag offensive edit
Your reply
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
2 followers

RSS

Stats

Asked: 2022-09-20 09:23:32 +0800

Seen: 8 times

Last updated: Sep 20

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