Textbox onFocus loses focus

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

MDuchemin
2560 ● 1 ● 6

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