A couple of questions on controlling Focus

Support
#1

In my application, I have a table displayed and a button window along the top:


<buttonsPanel height="30px">
    <button id="btnAddPin"  action="tblPins.create" caption="Create Response" icon="icons/create.png" responsive="true"/>
    <button id="btnSavePin" action="tblPins.Save" caption="Save Responses" icon="icons/save.png" responsive="true"/>
    <button id="btnRemovePin" action="tblPins.remove" caption="Delete Response" icon="icons/remove.png" responsive="true"/>
</buttonsPanel>
<table id="tblPins" editable="true" height="400px" width="200px">
    <actions>
        <action id="create" invoke="onAddPin" shortcut="CTRL-ARROW_DOWN"/>
        <action id="Save" invoke="onSavePin"/>
        <action id="remove"/>
    </actions>
    <columns>
        <column id="pin" editable="true"/>
    </columns>
    <rows datasource="updtransDs"/>
</table>

The “Create Response” button calls this action:


@Inject
private CollectionDatasource<Batchhdr, Long> batchhdrsDs;

@Inject
private CollectionDatasource<Updtrans, Long> updtransDs;

@Inject
private OptionsGroup paymentOptionsGroup;

@Named("tblPins")
private Table<Updtrans> pinTable;

public void onAddPin() {
	if (batchhdrsDs.getItem() == null) {
		showNotification("Please open an existing batch or create a new batch first", NotificationType.ERROR);
		return;
	}
	if (paymentOptionsGroup.getValue() == null) {
		showNotification("Please set a default payment type first", NotificationType.ERROR);
		return;
	}

	Updtrans updtrans = metadata.create(Updtrans.class);
	updtrans.setTraynumber(batchhdrsDs.getItem());
	updtrans.setPurchdate(batchhdrsDs.getItem().getBatchdate());
	updtrans.setPaymentcode(paymentOptionsGroup.getValue());
	updtrans.setAmount(BigDecimal.ZERO);
	updtransDs.addItem(updtrans);
	pinTable.setSelected(updtrans);
	pinTable.scrollTo(updtrans);
	pinTable.requestFocus(updtrans,"pin");
}

  1. The pinTable.requestFocus(updtrans,“pin”) call does not work. When I click the “Create Response” button, the focus stays there and does not move to the “pin” column of the newly added uptrans record.

  2. There is a fieldgroup for updtransDs also displayed on the screen. I have a custom Pickerfield in the table generated with addGeneratedColumn. That Pickerfield has a custom lookup action. When that action completes, I would like to move focus to a field inside the fieldgroup. I tried:


pinTable.requestFocus(updtrans, "amount");

but this does not work. Is it because the field is in a fieldgroup and not in the table itself? How can I move focus to a particular field in a fieldgroup - or anywhere on the page - at the end of my action?

#2

Hi,

Could you share a small sample application where we can see the problem? What content is shown inside of pinTable pin cell ?

#3

Thanks for replying. I managed to solve it by unwrapping the Vaadin components and using the .focus() call.

#4

That’s good, but a little bit strange, will try to reproduce the issue. It seems that there is a problem with focusing from a table cell.

#5

Spoke too soon. My Vaadin-based solution was for #2 above (focus on an arbitrary field). I still have not been able to get focus on my Table row after my Create button is pressed. The focus stays on the button and doesn’t move to the created row. I will try to set up a sample.

#6

I have been trying to create a small sample showing my problem. Of course, everything I try in the sample works perfectly! :-/ I am still trying to isolate the difference.

#7

Finally, I have reproduced the issue. It affects only PickerField / LookupPickerField inside of Table cell. Fix will be available in the next bug fix version of 6.4 release and later.

See also: https://youtrack.cuba-platform.com/issue/PL-8900

#8

That’s great! Thank you for your effort! :slight_smile:

#9

I’m sorry to say you have the same issue with a DateField as the requestFocus target. It also does not work. My same code navigating to a TextField works fine in the same table.

#10

Thank you for noticing that. In fact we have already fixed all these composite components: PickerField, ResizableTextArea and DateField, not only PickerField.