[BUG] DynamicField label in front of the value in CustomerUserInterface in DynamicField_Lens

[AlexanderOesterling-OTOBO]

Environment

• Server OS Distribution:
• OTOBO installation typ: Native
• Browser Chrome
• OTOBO version: 11.0.7

Expected behavior

I am in CustomerTicketMessage and select a value of a DynamicField_Reference.
I have a DynamicField_Lens that refereneces to a attribute of that selected object in the DynamicField_Reference.

Now the DynamicField_Lens should be filled with the value of that attribute and the label of the DynamicFIeld_Lens should move up so i can see the value.

Actual behavior

I am in CustomerTicketMessage and select a value of a DynamicField_Reference.
I have a DynamicField_Lens that refereneces to a attribute of that selected object in the DynamicField_Reference.

Now the DynamicField_Lens is filled but the label of the field is in front of the value so i dont see parts of the value.

How to reproduce

Steps to reproduce the behavior:

1. Add a DyamicField_Reference and a DynamicField_Lens and link the lens to the reference field.
2. Add them to CustomerTicketMessage.
3. Select an object in the DynamicField_Reference.
4. See error

Additional information

Screenshots

Here is a screenshot that shows my DynamicField_Reference "Sim Card" and also my DynamicField_Lens "Mobil Number".
The label is in front of the actual value of the field. I can only see the last four digits.

[svenoe]

I assume the field type of the field the lens points at is "Text", and as for those there was no way to fill them via AJAXUpdate yet, I assume some js is missing which sets the html class. Maybe in the Core.AJAX.js it suffices to simply trigger a blur on the field for simple text inputs, where select fields are redrawn etc.

Edit: Textfield is confirmed.

[MichaelThumes]

replicated locally on rel-11_0

on initial load of page, the DF lense field renders as:

<div class="Field">                    
  <input type="text" class="DynamicFieldText W50pc" id="DynamicField_TicketLense" name="DynamicField_TicketLense" title="TicketLense" value="" aria-invalid="false">
</div>

which triggers described erroneous behaviour until the DF is focused by clicking, which changes the rendered HTML to (note the additional css class 'oooFull'!) :

<div class="Field oooFull">                    
  <input type="text" class="DynamicFieldText W50pc oooFull" id="DynamicField_TicketLense" name="DynamicField_TicketLense" title="TicketLense" value="" aria-invalid="false">
</div>

Experimental JS executed after page load through JS dev console:

document.getElementById('DynamicField_TicketLense').parentNode.classList.add('oooFull');

Solves the problem and the label no longer hides the Value. However we'd need that for all Lense DFs shown?

[svenoe]

Ah, here again - probably triggering a blur on changed text fields should solve this. Always adding oooFull likely is wrong, because maybe you just emptied the field. See:

otobo/var/httpd/htdocs/js/Core.UI.InputFields.js

Lines 397 to 405 in 303ddf0

	// check whether field is filled
	if ( $.trim(FieldValue).length ) {
	$(this).addClass('oooFull');
	$(this).parent('.Field').addClass('oooFull');
	}
	else {
	$(this).removeClass('oooFull');
	$(this).parent('.Field').removeClass('oooFull');
	}

The background here is, that up until now text fields could not be changed via ACLs, but since lenses can point at text fields of different reference objects, indirectly now they can be changed.

Other field types other than text might be affected, too, but I think not too many are left, which are not handled in this routine explicitely anyways, by now. I was thinking of adding a general blur, but probably it's unnecessary.

[MichaelThumes]

see comment in #4030 (comment)