Hint Style issue with ISC 9.0

[yavery]

Hi,

We just upgraded from ISC 8.3p to 9.0p and we are observing styling issues with hints
on SelectItem fields when showHintInField == true.

The problem is twofold. 1st, the hint style upon initially displaying the field is
not correct (it doesn't display the hint using the hint style, but rather the regular
input style), and 2nd, that field has the "required" property set to true, therefore upon
validating, when the field is left blank, the hint switches to bold.

This used to work properly with 8.3p.

Anything that we need to change in our custom style sheets for this to work again ? Or is this
a regression in 9.0p ?

Here's our code for that SelectItem:

	//----------------------------------------------------------------------------------------------------------------------------
	getSelectPickerFieldDefinition : function(properties)
	{
		var baseProperties =
		{
			showTitle : false,
			width : 180,
			required : true,
			autoFetchData : true,
			fetchMissingValues : false,
			name : 'report',
			title : MeiStrings.get('spendLiability.picker.report.title'),
			hint : MeiStrings.get('spendLiability.picker.report.hint'),
			showHintInField : true,
			defaultToFirstOption : false,
			optionDataSource : 'dsSpendLiabilityPickerOptions',
			editorType : 'SelectItem',
			displayField : 'name',
			valueField : 'primaryKey',
			addUnknownValues : false,
			validateOnExit : false,
			pickListFields :
				[
					{ name : 'name', width : 120, canHide : false },
					{ name : 'closedOn', title : MeiStrings.get('spendLiability.picker.report.status'), canHide : false }
				],
			pickListProperties:
			{
				canHover: true,
				showHover: true,
				canSort : false,
				canGroupBy : false,
				canAutoFitFields : false,
				//----------------------------------------------------------------------------------------------------------------------------
				formatCellValue : function (value, record, field, viewer)
				{
					if (viewer == 0) //Name column
					{
						return record.name;
					}
					else if (viewer == 1) //Status column
					{
						return record.closedOn ? MeiStrings.get('spendLiability.picker.report.closed') : MeiStrings.get('spendLiability.picker.report.open');
					}
				},
				//----------------------------------------------------------------------------------------------------------------------------
				cellHoverHTML : function (record)
				{
					return record.closedOn ? MeiStrings.get('spendLiability.picker.report.period.closed') : MeiStrings.get('spendLiability.picker.report.period.open');
				}
			}
		};

		var fld = isc.addProperties(baseProperties, properties);
		return fld;
	}

Thanks,

[yavery]

We are also experiencing similar issues with ComboBoxItem fields ... bold/italic gets screwed up
with hint text upon initial form display as well as confusion around the required = true flag.

Thanks,

[Isomorphic]

We're not seeing a difference in behavior between in-field hint styling in 9.0 vs 8.3.
We may be misunderstanding what you're seeing. Can you show us screenshots of the 8.3 behavior vs the 9.0 behavior that you're seeing so we can better understand what's going on for you?

Thanks
Isomorphic Software

[yavery]

See attached screenshot. As you can see, the "Period" and "Account Level" field hints are displayed using
the regular font (wrong), whereas the other fields are displayed using the hint assigned font (correct).

We didn't have that issue in 8.3p and started showing in 9.0p.

We also noticed that fields with required == true will also alter the look of the field hint/title when the validation
kicks in.

Thanks,

[Isomorphic]

We will need to see a way to reproduce this. Your screenshot is showing that some fields apply hint styling to the in-field hint text, and some do not, so we need to understand what's special about those fields.

Can you put together a small entry-point class showing this behavior (a field which shows the hint style and one which does not) which we can run on our end and determine what's going on.

Thanks
Isomorphic Software

[fmanfredi]

Here is a small test page which demonstrates what we are experiencing:

<HTML>
    <HEAD>
        <SCRIPT>
        window.isomorphicDir = 'isomorphic/';
        </SCRIPT>

        <SCRIPT SRC="isomorphic/system/modules/ISC_Core.js"></SCRIPT>
        <SCRIPT SRC="isomorphic/system/modules/ISC_Foundation.js"></SCRIPT>
        <SCRIPT SRC="isomorphic/system/modules/ISC_Containers.js"></SCRIPT>
        <SCRIPT SRC="isomorphic/system/modules/ISC_Grids.js"></SCRIPT>
        <SCRIPT SRC="isomorphic/system/modules/ISC_Forms.js"></SCRIPT>
        <SCRIPT SRC="isomorphic/system/modules/ISC_DataBinding.js"></SCRIPT>
        <SCRIPT SRC="isomorphic/skins/SmartClient/load_skin.js"></SCRIPT>
        <STYLE type="text/css">
           table {font-weight: inherit}
        </STYLE>
        <TITLE>Investigation - SelectItem hint font changed from initial hint font when changing focus.</TITLE>
    </HEAD>
    <BODY STYLE="overflow:hidden">

        <h1>Bug with SelectItem hint font changed from initial hint font when changing focus.</h1>
        <p>
            <li><b>SmartClient versions tested against:</b>
                <ol>
                    <li>v9.0p_2013-12-03/Pro Deployment - 2013-12-03 - Behavior differs from 8.3p below.</li>
                    <li>v8.3p_2013-10-24/Pro Deployment - 2013-10-24 - Works as expected.</li>
                </ol>
            </li>
        <p>
        <p><b>Why we think this is a bug in v.9.0p</b>:  The hint font remains the same for the ComboBoxItem when changing focus. We believe that the hint font for the SelectItem should also remain the same after changing focus. Examining the CSS class-name, we can see it change dynamically from 'selectItemTextHint' to 'selectItemText', and remain as 'selectItemText' until the valuesManager for the dynamicForm is reset. This occurs if the SelectItem is required or not.</p>

        <span>Here are the steps to reproduce the behaviour.</span>
        <ol>
            <li>Steps to reproduce the problem scenario
                <ol>
                    <li>Load the page fresh.</li>
                    <li>Note the hint font of the select items</li>
                    <li>Tab through the DynamicForm items until the 'Clear' button is focused.</li>
                    <li>Note that the hint font of the SelectItems has changed. (CSS from 'selectItemTextHint' to 'selectItemText').</li>
                    <li>Note that the hint font of the ComboBoxItem has not changed.</li>
                    <li>Click the 'Clear' button</li>
                    <li>You'll see that the hint font for the SelectItems is now the original hint font. (CSS 'selectItemTextHint')</li>
                </ol>
            </li>
        </ol>

        <p><b>Expected result</b>: We would expect that the hint text would remain in the hint font when focusing and then defocussing a SelectItem.</p>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <p><b>As you may have noticed, the font-weight of the hint for the second SelectItem is BOLD! (FF & Chrome only)</b>This bug also makes the SelectItem's values <b>BOLD</b> when selected. The problem only appears with SelectItems (so far that we can tell).</p>
        <p>
            <b>Here is how we exposed this behaviour.</b>
                <ol>
                    <li>Create a css font-weight of inherit for table : ie: table {font-weight: inherit}</li>
                    <li>Create a DynamicForm with any value for requiredTitleSuffix : '' (except '&lt;/b&gt')</li>
                    <li>Create a SelectItem in the DynamicForm with titleOrientation : 'top', required : true, and hint : 'someText'</li>
                    <li>Upon examining the Dom, you'll see that the table element with css 'selectItemControl' is wrapped in a '&lt;b&gt' element.</li>
                </ol>
            </li>
        </p>
        <p> The problem is masked until someone overrides the css font-weight for table : ie: table {font-weight: inherit}, as we did for this example. It appears that a '&lt;b&gt' tag is being opened in getTitleHTML(), but is never being closed when we have a requiredTitleSuffix defined on the DynamicForm. We can circumvent the problem simply by adding a closing tag '&lt;/b&gt' to the requiredTitleSuffix, ie requiredTitleSuffix : '&lt;/b&gt' , but for obvious reasons this is not desirable. </p>

        <p><b>Expected result</b>: We would expect that the hint to not be bold in the above described situation.</p>
        <p><b>Proposed solution</b>: Since the '&lt;/b&gt;' closing tag is not being properly appended when operating on output.append() in the getTitleHTML in ISC_Forms.js, I suggest that if requiredRightTitlePrefix is appended, then a closing tag should also be appended.

        <SCRIPT>
            var comboDataSource = DataSource.create
            ({
                ID : 'comboDataSource',
                clientOnly : true,
                fields :
                [
                    { name : 'user_id', type : 'integer' },
                    { name : 'name', type : 'text' },
                    { name : 'email', type : 'text' }
                ],
                testData :
                [
                    { 'user_id': 1, 'name': 'Chris Rivers', 'email': 'chris@hipchat.com', 'username' : 'riversc' },
                    { 'user_id': 3, 'name': 'Peter Curley', 'email': 'pete@hipchat.com', 'username' : 'curleyp' },
                    { 'user_id': 5, 'name': 'Garret Heaton', 'email': 'garret@hipchat.com', 'username' : 'heatong' }
                ]
            });

            var textItem = {
                name : 'textItem',
                title: 'TextItem',
                editorType : 'TextItem',
                required : false
            };

            var valueMap = {};

            valueMap['Key1'] = 'Value1';
            valueMap['Key2'] = 'Value2';
            valueMap['Key3'] = 'Value3';

            var select1 = {
                name: 'select1',
                title: 'SelectItem (Bold hint & values)',
                editorType : 'select',
                hint : 'Select a value',
                showHintInField : true,
                //titleOrientation : 'top',       //Needed to demonstrate bold bug
                required : true,                //Needed to demonstrate bold bug
                valueMap : valueMap
            };

            var select2 = {
                name : 'select2',
                title: 'SelectItem (Bold hint & values)',
                editorType : 'select',
                hint : 'Select a value',
                showHintInField : true,
                titleOrientation : 'top',       //Needed to demonstrate bold bug
                required : true,                //Needed to demonstrate bold bug
                valueMap : valueMap
            };

            var comboBoxItem = {
                name: 'comboBoxItem',
                title : 'ComboBoxItem works as expected',
                editorType : 'ComboBoxItem',
                displayField : 'name',
                valueField : 'username',
                addUnknownValues : false,
                hint : 'Select a value',
                showHintInField : true,
                titleOrientation : 'top',
                required : true,
                optionDataSource : 'comboDataSource',
                sortField : 'name',
                textMatchStyle : 'substring',
                pickListWidth : 550,
                pickListHeight : 245,
                pickListFields :
                [
                    { name : 'user_id', width : '10%', title : 'User id' },
                    { name : 'name', width : '40%', title : 'Name' },
                    { name : 'email', width : '50%', title : 'Email' }
                ]
            };

            var formDataSource = DataSource.create
            ({
                ID : 'formDataSource',
                clientOnly : true,
                fields :
                [
                    select2
                ]
            });

            var valuesManager = ValuesManager.create();

            var buttonItem = {
                        name : 'ButtonItem',
                        editorType : 'ButtonItem',
                        width : 60,
                        startRow : false,
                        endRow : false,
                        vAlign : 'bottom',
                        tabIndex : 998,
                        title : 'Clear',
                        click : 'valuesManager.resetValues();'
                    };

            var dynamicForm = DynamicForm.create({
                width: 500,
                valuesManager : valuesManager,
                requiredTitleSuffix : '',       //Needed to demonstrate bold bug
                fields:
                [
                    textItem,
                    {
                        type : 'SpacerItem'
                    },
                    select1,
                    {
                        type : 'SpacerItem'
                    },
                    select2,
                    {
                        type : 'SpacerItem'
                    },
                    comboBoxItem,
                    buttonItem
                ]
            });

            VLayout.create
            ({
                width : 730,
                members :
                [
                    VLayout.create({ height : 450 }), // Bogus layout to create room for our intro and explanation,
                    VLayout.create
                    ({
                        members :
                        [
                            dynamicForm
                        ]
                    })
                ]
            });
            dynamicForm.focusInItem('textItem');
        </SCRIPT>
    </BODY>
</HTML>

The bold problem is only visible in FF & Chrome.

Thanks

[Isomorphic]

We've made a change to address the problem with the normal text box style being applied to the fields showing a hint value, in the 9.0 branch.
Please see the next nightly build (Jan 8 or above) to see the fix.

On the requiredTitleSuffix issue - this is actually behaving predictably. There are a pair of properties - "requireTitlePrefix" and "requiredTitleSuffix" which apply the bold styling to the title for required fields. By updating the suffix, to be an empty string, you're leaving an open "<b>..." tag.
The fact that this only has an obvious effect for certain items (with the top-aligned title, and not the same behavior in every browser) is simply an implementation quirk. In the case where the ill behavior is not showing up, other HTML is implicitly closing out the unbalanced <b>... tag, so you're not actually seeing any additional bolded text.

Regards
Isomorphic Software

[fmanfredi]

Ok, we'll check the hint style for the hint value on the 8th.

So it does appear that we are using requiredTitleSuffix parameter incorrectly.

According to the documentation the defaultValue is " :</b>", so if we want to lose the colon on display, our requiredTitleSuffix should be "</b>", and not "".

It does seem a little strange that we would have to add HTML markup to have it function correctly, but I guess we must have missed the default value in the documentation.

Thanks!