Edge case: API-added InputfieldSubmit "hijacks" javascript triggered save?

[Chris Bennett]

Weird edge case, which has me scratching my head.

Background: API-added button to delete selected files exhibits (maybe) weird behavior when save is triggered by custom js.

As soon as the InputfieldSubmit field is there, it intercepts/captures the javascript trigger instead.
Almost like validation or as if it's acting as an anchor.

It definitely seems like the inclusion of that InputfieldSubmit causes the unexpected (by me) behavior.
Have tried multiple different workarounds to troubleshoot:

• deleting trigger does nothing
• deleting hook does nothing
• moving InputfieldSubmit outside MarkupAdminDataTable does nothing
• changing name and/or id of InputfieldSubmit does nothing 

If the new InputfieldSubmit is there, it 'catches' the custom js save trigger.
If the field is not added (or hidden then loaded by AJAX), then the custom js trigger happily clicks the save_submit id, and page save happens, as expected.

console.log confirms 'submit_save' is the element' the js was targeting.
The js save hangs, and window.parent.document.activeElement (and your eyes) confirm the new InputfieldSubmit button is now the active element.

Setting InputfieldSubmit as button prevents the weirdness, but doesn't provide the desired functionality.
As type=submit, the files are deleted snappily, and the refreshed page is displayed showing they are gone.

So it's very much a weird edge case, but I'd love to know what is happening behind the scene if anyone has any ideas or experience with similar issues.

Simple custom js is below:

 if (input.classList.contains('autoSaveOnChange')){
			
            if (input.classList.contains('autoGenerateNew')){
                var generateCheckbox = getById('Inputfield_generateNewFavicons');
                var showAdvanced     = getById('Inputfield_showAdvanced');
                generateCheckbox.checked = true;
				showAdvanced.checked = false;
            };
			
            input.closest('.InputfieldContent').classList.add('saveLoading');
		    
			var saveSubmit   = getById('submit_save') || getById('Inputfield_submit_save_module');

			//console.log(saveSubmit)
			saveSubmit.click();

        }

InputfieldSubmit is added as follows:

        // Add in button to delete fields
		$button = $this->modules->get('InputfieldSubmit');
		$button->attr('id+name', 'deleteSelectedFolders');
		$button->value = 'Delete selected folders';
		//button->type = 'button'; auto save works with this, but hook does not
		
		$field->add($button);