How to set focus in perspective

I have a pop-up view in perspective that contains some labels, buttons and a textfield. I’d like to set the focus to the textfield when the pop-up opens, how can I do this?

Right-click the component and select Configure Events. Select the onStartup Event and supply the following code.

self.focus()
3 Likes

That’s what I’m looking for, thank you sir.

1 Like

This method worked while we were on 8.0.12, but seems to have stopped working on 8.0.17. I am working with the same exact scenario as the OP (pop-up window, focus on text field onStartup). Is this fixed in later releases?

Oh, that’s interesting. I just checked in 8.1.6 and it’s not working there the first time the popup opens, but it is working on subsequent attempts. We’ll look into this.

I just tried to replicate this again and am unable to replicate the issue in any version after 8.1.6.

Currently, that script is working only for one time.
For example, if we are using a barcode scanner, when the value is entered automatically, the cursor disappears, and the next barcode can not be entered in the box unless the operator clicks on that box again. How can we write the code to run constantly and not only for one-time use?

That’s expected, because it would only happen when the component gets created.

I would use this same approach (the onStartup Event usage) along with a value-changed script. Right-click the value for the props,text property of your TextField and select “Add Change Script…”. Supply the same code: self.focus(). You might also need to set TextField.props.deferUpdates to have a value of false, and you might need to do the same for TextField.props.rejectUpdatesWhileFocused.

1 Like

Do we have a similar approach in perspective? I am using version 8.1.6

That recommendation was for Perspective.

1 Like

Thank you!
I was not able to find deferUpdate property and rejectUpdatesWhileFocused. I think this is because I am using numeric field not text field.

https://docs.inductiveautomation.com/display/DOC80/Perspective+-+Numeric+Entry+Field

And even though, I tried your method for text boxes as well. the cursor remains in that field, which is not what I am looking for. When the operator scan a barcode the cursor should appear at the beginning of the field for the next barcode. Currently, with your method, the new barcode value is added to the previous barcode value,
so now it is:

barcode 1: 12345
barcode2: 1234598765

but it should be:
barcode 1: 12345
barcode2: 98765

So then you need to modify the script to point to the “next” barcode. You should look into the Inductive University courses for Perspective.
Instead of self.focus(), you should be using something like:

self.getSibling("NumericEntryField_X").focus()
# modify "_X" to point to the next field
1 Like

Thank you! I know how to point to the next field.
The application I am trying to do has one field only. By next barcode, I meant the next barcode that the barcode scanner scans.
So imagine I have one barcode:12345 and its field has a focus on it. when the barcode scanner scans the next barcode, the field should show the next barcode value, for example, 9876, but instead, it shows 123459876 (a combined value!)

As part of your change script, you will need to empty out the field.

# also do any sort of db write or change logic here before you wipe the value.
self.props.value = ""
self.focus()
1 Like

Thank you! Unfortunately, the new barcode value is still added to the previous one and this is what I did:

First I created an event for that input component:

Then I wrote a script for edit property change script:

image

And then I assigned those two props to be false:

self.props.value = “” is not valid in your case

1 Like