11.1p TextIcons issues with different FormItems (SelectItem, SpinnerItem)

[Blama]

Hi Isomorphic,

a recently saw this sample and liked it a lot. I tried to use FontAwesome letters (=icons) like your "telephone" in the sample. This does work as expected for most of the FormItems, but I have a problem with two.
Please see this modified sample (v11.1p_2018-01-22). As you can see there is an issue with SpinnerItem, where the icon is added but invisible after the item and not in it. The item itself is shorter because of the "icon". As this is a child of TextItem and ComboBoxItem and TextItem work both, I assume this is easily fixed.
The same issue is with SelectItem, but I don't know if this is also easily fixed.

isc.DynamicForm.create({
    ID: "form1",
    width: 620,
    colWidths: [190, "*"],
    fields: [
        {name: "text", title:"Text", type:"text", hint: "A plain text field", wrapHintText: false,
        icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "✆",
            baseStyle: "telIcon"
        }]},
        {name: "colorPicker", title:"Color Picker", type:"color",
        icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "✆",
            baseStyle: "telIcon"
        }]},
        {name: "textArea", title:"TextArea", type:"textArea"},
        {name: "stackedSpinner", title: "Stacked Spinner", editorType: "SpinnerItem", writeStackedIcons: true,
         defaultValue: 5, min: 0, max: 10, step: 0.5, wrapTitle: false,
        icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "✆",
            baseStyle: "telIcon"
        }]},
        {name: "unstackedSpinner", title: "Unstacked Spinner", editorType: "SpinnerItem", writeStackedIcons: false,
         defaultValue: 5, min: 0, max: 10, step: 0.5,
        icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "✆",
            baseStyle: "telIcon"
        }]},
        {name: "slider", title: "Slider", editorType: "SliderItem",
         minValue: 1, maxValue: 5, numValues: 5, height: isc.Browser.isTouch ? 52 : 36},
        {name: "link", title: "LinkItem", type: "link", height: 80, target: "javascript",
         click: "isc.say('Hello world!')", linkTitle: "Click Me"},
        {name: "checkbox", title: "Checkbox", type: "checkbox", height: 25},
        {name: "radioGroup",title: "Radio Group", type: "radioGroup", 
         valueMap: ["Option 1", "Option 2"]}
    ],
    values: { slider: 4 }
});

var valueMap = {
    "US" : "<b>United States</b>",
    "CH" : "China",
    "JA" : "<b>Japan</b>",
    "IN" : "India",
    "GM" : "Germany",
    "FR" : "France",
    "IT" : "Italy",
    "RS" : "Russia",
    "BR" : "<b>Brazil</b>",
    "CA" : "Canada",
    "MX" : "Mexico",
    "SP" : "Spain"
}

var valueIcons = {
    "US" : "US",
    "CH" : "CH",
    "JA" : "JA",
    "IN" : "IN",
    "GM" : "GM",
    "FR" : "FR",
    "IT" : "IT",
    "RS" : "RS",
    "BR" : "BR",
    "CA" : "CA",
    "MX" : "MX",
    "SP" : "SP"
}

isc.DynamicForm.create({
    ID: "form2",
    width: 620,
    colWidths: [190, "*"],
    isGroup: true,
    groupTitle: "Select / Combo Controls",
    fields : [{
        name: "bugStatus", title: "Select", hint: "<nobr>A simple combobox</nobr>", 
        editorType: "ComboBoxItem",
        valueMap : {
            "cat" : "Cat",
            "dog" : "Dog",
            "giraffe" : "Giraffe",
            "goat" : "Goat",
            "marmoset" : "Marmoset",
            "mouse" : "Mouse"
        },
        icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "&#x2706;",
            baseStyle: "telIcon"
        }]
    },
    {
        name: "itemName", title: "Item Name", editorType: "ComboBoxItem", 
        optionDataSource: "supplyItem",
        icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "&#x2706;",
            baseStyle: "telIcon"
        }]
    },
    {
        name: "selectItem", title: "Select", hint: "<nobr>A combobox with icons</nobr>",
        editorType: "SelectItem",
        valueMap : valueMap,
        valueIcons : valueIcons,
        imageURLPrefix : "flags/16/",
        imageURLSuffix : ".png",
        icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "&#x2706;",
            baseStyle: "telIcon"
        }]
    },
    {
        name: "selectItem2", title: "Select", hint: "<nobr>A combobox with styled entries</nobr>",
        editorType: "SelectItem",
        valueMap : {
            "red" : "<span style='color:#FF0000;'>Red</span>",
            "green" : "<span style='color:#00FF00;'>Green</span>",
            "blue" : "<span style='color:#0000FF;'>Blue</span>"
        },
        icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "&#x2706;",
            baseStyle: "telIcon"
        }]
    },
    {
        name: "selectItemMultipleGrid", title: "Select Multiple (Grid)",
        editorType: "SelectItem",
        multiple: true,
        multipleAppearance: "grid",
        valueMap : {
            "cat" : "Cat",
            "dog" : "Dog",
            "giraffe" : "Giraffe",
            "goat" : "Goat",
            "marmoset" : "Marmoset",
            "mouse" : "Mouse"
        },
        icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "&#x2706;",
            baseStyle: "telIcon"
        }]
    },
    {
        name: "selectItemMultiplePickList", title: "Select Multiple (PickList)",
        editorType: "SelectItem",
        multiple: true,
        multipleAppearance: "picklist",
        valueMap : {
            "cat" : "Cat",
            "dog" : "Dog",
            "giraffe" : "Giraffe",
            "goat" : "Goat",
            "marmoset" : "Marmoset",
            "mouse" : "Mouse"
        },
        icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "&#x2706;",
            baseStyle: "telIcon"
        }]
    }
    ]
});

isc.DynamicForm.create({
    ID: "dateForm",
    width: 620,
    fixedColWidths: true,
    colWidths: [190, "*"],
    isGroup: true,
    groupTitle: "Date Controls",
    fields : [{
        name: "dateItem", title: "Date", hint: "<nobr>Picklist based date input</nobr>", 
        editorType: "DateItem",
        textFieldProperties: {icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "&#x2706;",
            baseStyle: "telIcon"
        }]}
    },
    {
        name: "dateItem2", title: "Date", hint: "<nobr>Direct date input</nobr>", 
        editorType: "DateItem",
        useTextField: true,
        textFieldProperties: {icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "&#x2706;",
            baseStyle: "telIcon"
        }]}
    },
    {
        name: "timeItem", title: "Time", 
        editorType: "TimeItem",
        textFieldProperties: {icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "&#x2706;",
            baseStyle: "telIcon"
        }]}
    },
    {
        name: "timeItem", title: "Time", hint: "Picklist based time input",
        editorType: "TimeItem",
        useTextField: false,
        textFieldProperties: {icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "&#x2706;",
            baseStyle: "telIcon"
        }]}
    },
    {
        name: "dri", title: "Date Range",
        width: 400,
        editorType: "DateRangeItem",
        allowRelativeDates: true,
        fromDate: "$today",
        toDate: "-1m",
        icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "&#x2706;",
            baseStyle: "telIcon"
        }]
    },
    {
        name: "mdri", title: "Mini Date Range", 
        editorType: "MiniDateRangeItem",
        icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "&#x2706;",
            baseStyle: "telIcon"
        }]
    },
    {
        name: "rdi", title: "Relative Date",
        editorType: "RelativeDateItem",
        icons: [{
            name: "tel",
            src: "blank", // if inline icons are not supported by the browser, revert to a blank icon
            inline: true,
            text: "&#x2706;",
            baseStyle: "telIcon"
        }]
    }
    ]
});

isc.VStack.create({
    membersMargin: 10,
    members: [ form1, form2, dateForm]
});

Best regards
Blama

[Isomorphic]

We've made a change to address this issue. Please try the next nightly build, dated January 25.

Regards
Isomorphic Software

[Blama]

Hi Isomorphic,

I can see this is fixed using v11.1p_2018-01-25 and SNAPSHOT_v12.0d_2018-01-25, for both SpinnerItem as well as SelectItem.

Thank you & Best regards
Blama

[Blama]

Hi Isomorphic,

I just noticed that the Icons in the testcase from #1 (now v11.1p_2018-02-15) are in the tab order for basically all FormItems (TextItems/Colorpicker/SelectItem/ComboBoxItem/DateItem/TimeItem,but not for SpinnerItem) and also after their text entry box.

I'd expect them not to be in the taborder by default, and if they are, they should be before the textbox, because they are also before it graphically.

Best regards
Blama

[Blama]

Hi Isomorphic,

additionally, SelectItems with icons are larger than without and the icon is not centered. I'd expect them to be the same height as before.



Best regards
Blama

[Blama]

Hi Isomorphic,

can you also have a look at the open ones in this thread, especially #4?

Thank you & Best regards
Blama

[Isomorphic]

Hi Blama
On #4, you can easily suppress inline icons from being included in the page's tab order by setting tabIndex explicitly to -1 on them (or setting canTabToIcons to false at the item, or form level).
Your point about how intuitively they should show up before rather than after the text box in the page's tab order is well taken. We will be making a change to address that at some point but it's likely to be after the 12.0 release.
On #5 - we see the issue and have a possible solution undergoing some internal testing.

Regards
Isomorphic Software