TabIndex issues using custom widget

[DiegoGuidi]

Hello everyone,

I'm trying to develop a sample custom widget to be used inside Web AppBuilder (v2.18) and I have some issues with dojo components and tabindexes.

I've made a simple component with a div and some textboxes, using this html code:

<div style="width: 100%; height: 100%">
	<div data-dojo-attach-point="mapIdNode"></div>
	<br />
	<label for="StartPoint">${nls.startPoint}</label>
	<input
		type="text"
		name="StartPoint"
		placeholder="Berlin"
		data-dojo-type="dijit/form/ValidationTextBox"
		required="true"
		id="StartPoint"
	/>
	<br />
	<label for="StopPoint">${nls.stopPoint}</label>
	<input
		type="text"
		name="StopPoint"
		placeholder="Paris"
		data-dojo-type="dijit/form/ValidationTextBox"
		required="true"
		id="StopPoint"
	/>
	<br />
	<button
		type="button"
		data-dojo-type="dijit/form/Button"
		id="RouteButton"
		disabled="true"
	>
		${nls.routeButton}
	</button>
</div>

but the navigation using the TAB key from the first textbox goes to the div container, and not to the second textbox.

My js is completely disabled, except the inizialization part that starts with:

define([
	"dojo/_base/declare",
	"jimu/BaseWidget",
	"dijit/_WidgetsInTemplateMixin",
	"dojo/parser",
	"dojo/keys",
	"dijit/registry",
	"dijit/form/ValidationTextBox",
	"dijit/form/Button",
	"dojo/request/xhr",
	"esri/geometry/Point",
	"esri/symbols/SimpleMarkerSymbol",
	"esri/symbols/SimpleLineSymbol",
	"esri/geometry/Polyline",
	"esri/graphic",
	"esri/layers/GraphicsLayer",
	"dojo/domReady!",
], function (
	declare,
	BaseWidget,
	_WidgetsInTemplateMixin,
	parser,
	keys,
	registry,
	_dvtb,
	_dbtn,
	xhr,
	Point,
	SimpleMarkerSymbol,
	SimpleLineSymbol,
	Polyline,
	Graphic,
	GraphicsLayer
) {
	//To create a widget, you need to derive from BaseWidget.
	return declare([BaseWidget, _WidgetsInTemplateMixin], {
		//please note that this property is be set by the framework when widget is loaded.
		//templateString: template,

		baseClass: "jimu-widget-orsdemo",

		postCreate: function () {
			this.inherited(arguments);
			console.log("postCreate");
		},

		startup: function () {
			this.inherited(arguments);
			console.log("startup");

			parser.parse();
			const map = this.map;
			this.mapIdNode.innerHTML = "map id: " + map.id;

		},
	});
});

I tried also to use other dojo components (like the textbox instead of the ValidationTextBox), using regular input elements (removing the data-dojo-type), wrapping the elements in form and tables (like in other regular arcgis widgets) but unsuccessfully.

Any idea? Thanks for the support.

[DiegoGuidi]

this workaround looks working https://gis.stackexchange.com/q/379806/463

at least in a super-simple case like this one below (only html, empty js), that reproduces the problem without the workaround and works as expected with the workaround enabled

<div class="rootContainer">
	<input type="text" />
	<br />
	<input type="text" />
	<br />
	<input type="text" />
	<br />
	<input type="text" />
	<br />
	<input type="text" />
</div>

[DiegoGuidi · Accepted solution]

ended up handling manually in the onOpen method, that is way powerful because enable the ciclying of the components so the focus is retained in the custom widget. Hope it helps to anyone out there!

const firstNode = dom.byId("FirstElement");
jimuUtils.initFirstFocusNode(this.domNode, firstNode);
const lastNode = dom.byId("LastElement");
jimuUtils.initLastFocusNode(this.domNode, lastNode);
if (jimuUtils.isAutoFocusFirstNodeWidget(this)) {
  firstNode.focus();
}