[solved] why is $li.trigger('opened'); fired twice in the pw admin?

[bernhard]

please see this screencast. i have two questions:

1. dou you also experience the bug related to inputfield toggles that i demonstrate at 0:09 ? one does not see it clearly but i click the inputfield but the field does not get collapsed. i have this in all my installations. you have to click the chevron icon on the right first. after you clicked it once you can click everywhere on the inputfields label to toggle it.
2. why is the opened and openReady event fired twice? i tried to understand the code but i have no explanation yet.
   the trigger is here: https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/templates-admin/scripts/inputfields.js#L1018
   i put a console.log() here: https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/templates-admin/scripts/inputfields.js#L1000 (fired only once)
   but if i catch the opened event like this, i always get 2 logs:

	<script>
	$(document).on('opened', 'li', function(e) {
		console.log('opened!');
		console.log($(e.target));
	});
	$(document).on('openReady', 'li', function() {
		console.log('openReady!');
	});
	</script>

i thought maybe the event is fired on different li elements, but e.target returns the same element...

 

[szabesz]

8 hours ago, bernhard said:

but i click the inputfield but the field does not get collapsed. i have this in all my installations. you have to click the chevron icon on the right first. after you clicked it once you can click everywhere on the inputfields label to toggle it.

+1 and it also flashes a few times instead of closing it.

 

[fbg13]

The first part is intended

// https://github.com/ryancramerdesign/ProcessWire/blob/a210ba0b5ea67e56fef8a27a620bcfa6f96ca0b8/wire/templates-admin/scripts/inputfields.js#L999
$(document).on('click', '.InputfieldStateToggle, .toggle-icon', function() {

  var $t = $(this); // clicked element, either label or the icon
  var $li = $t.closest('.Inputfield');
  var isIcon = $t.hasClass('toggle-icon');  // is the clicked element the icon?
  var $icon = isIcon ? $t : $li.children('.InputfieldHeader, .ui-widget-header').find('.toggle-icon'); // the icon
  // initially the $li doesn't have the classes InputfieldStateCollapsed and InputfieldStateWasCollapsed
  // they are added by clicking the toggle icon
  var isCollapsed = $li.hasClass("InputfieldStateCollapsed"); 
  var wasCollapsed = $li.hasClass("InputfieldStateWasCollapsed");
  if($li.hasClass('InputfieldAjaxLoading')) return false;
  ...
  if(isCollapsed || wasCollapsed || isIcon) { // all are false when clicking the label
  ...
  // https://github.com/ryancramerdesign/ProcessWire/blob/a210ba0b5ea67e56fef8a27a620bcfa6f96ca0b8/wire/templates-admin/scripts/inputfields.js#L1035
  } else {
    if(typeof jQuery.ui != 'undefined') {
      var color1 = $icon.css('color');
      var color2 = $li.children('.InputfieldHeader, .ui-widget-header').css('color'); 
      $icon.css('color', color2);
      // the flashing icon 
      $icon.effect('pulsate', 300, function () {
        $icon.css('color', color1);
      });
    }
    if(!$li.hasClass('InputfieldNoFocus')) $li.find(":input:visible:eq(0)").focus();
  }
    

 

[bernhard]

Better late than never... I've just created a fix for the annoying inputfield bug ? 

https://github.com/processwire/processwire/pull/169

[bernhard]

Sorry for the double post, but could you guys please add your support to my explanation of this PR on github? https://github.com/processwire/processwire/pull/169#issuecomment-604474639

Especially @Gadgetto @Robin S @adrian @wbmnfktr @horst @teppo @kongondo

Thank you!