Set focus on text input, skipping label, with label field above input text

Hi Tulip Community,

I created a custom widget that helps me get around the ‘setFocus’ issue that I have seen some discussion on within the community board. It also solves an issue and use case I see as being helpful. This is a variation of the ‘Tab past Input Label to Input field Widget (v2)’ I put out there a few minutes ago. The main difference being that the label field is above the input text box.
Widget name is : Tab over label which is above input text widget

Essentially, this is a widget that includes a label field and a Text input box, but when the user uses the [TAB] key to enter into it, it skips over leaving the focus on the label field and puts the focus right on the input text control. A very real use case I see for this is in a discrete manufacturing operation where the operator is required to scan in several parts(part number or serial number) in sequence, into a list of parts along with their labeled names, on a workcenter or Tulip App. Again, similar to the widget I mentioned before. This one also does not include a Prop for setting the width, in px, of the input text box. Nor does it include Events for keypress or EnterPress.

I use the jQuery library.
Prop1: ‘TextValue’ – input only value specified from App to be the ‘label’ field of the widget.
Prop2: ‘Outputfromsecondtextbox’ – input/output value for actual value the user entered
Event1: ‘NewSomeInput’ – fires when an onchange event happens on input box.

Please feel free to enhance, modify, or improve up this basic widget to add whatever more capabilities you find useful.

customWidget-Tab over label which is above input text widget.json (2.9 KB)

Thanks,

William
@wkurth4008

1 Like