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.