Updates to InputfieldSubmit dropdown option to support a required state where there is no default action by just clicking the button, so you have to click a dropdown action

wire/modules/Inputfield/InputfieldSubmit/InputfieldSubmit.module

@@ -3,7 +3,7 @@
 /**
  * An Inputfield for handling "submit" buttons
  * 
- * ProcessWire 3.x, Copyright 2019 by Ryan Cramer
+ * ProcessWire 3.x, Copyright 2021 by Ryan Cramer
  * https://processwire.com
  * License: MPL 2.0
  * 
@@ -12,6 +12,7 @@
  * @property bool $small Whether or not button should be small, where supported (default=false). 
  * @property string $dropdownInputName Name of input to receive selected dropdown value (default='_action_value') #pw-internal
  * @property bool $dropdownSubmit Selected dropdown value becomes submit value? (default=true) #pw-internal 
+ * @property bool $dropdownRequired Require dropdown selection, when true, click submit without selection opens dropdown @since 3.0.180 #pw-internal
  * @property string $html Button inner HTML label (default='') @since 3.0.134
  * @property string $text Button inner TEXT label, if $html not provided. (default='') @since 3.0.134
  * @property string $value Button value attribute and inner TEXT label, if $text it provided (default='Submit')
@@ -25,9 +26,9 @@ class InputfieldSubmit extends Inputfield {
 		return array(
 			'title' => 'Submit', // Module Title
 			'summary' => __('Form submit button', __FILE__), // Module Summary
-			'version' => 102,
+			'version' => 103,
 			'permanent' => true, 
-			);
+		);
 	}
 
 	/**
@@ -69,6 +70,9 @@ class InputfieldSubmit extends Inputfield {
 		// Selected dropdown value becomes submit value? If set to false, then only the 
 		// dropdownInputName above will contain the selected value
 		$this->set('dropdownSubmit', true);
+		
+		// dropdown selection required? (when true, clicking submit without dropdown selection opens dropdown)
+		$this->set('dropdownRequired', false);
 	}
 	
 	public function set($key, $value) {
@@ -168,8 +172,9 @@ class InputfieldSubmit extends Inputfield {
 	 * 
 	 */
 	public function ___render() {
+		$sanitizer = $this->wire()->sanitizer;
 		$attrs  = $this->getAttributesString();
-		$icon = $this->icon ? $this->wire('sanitizer')->name($this->icon) : '';
+		$icon = $this->icon ? $sanitizer->name($this->icon) : '';
 		$icon = $icon ? wireIconMarkup($icon) . ' ' : '';
 		$buttonText = $this->getSetting('html'); // option for non-encoded button text
 		if(empty($buttonText)) {
@@ -178,7 +183,7 @@ class InputfieldSubmit extends Inputfield {
 			$buttonText = $this->entityEncode($buttonText);
 		}
 		$buttonText = $icon . $buttonText;
-		$textClass = $this->wire('sanitizer')->entities($this->getSetting('textClass'));
+		$textClass = $sanitizer->entities($this->getSetting('textClass'));
 		if(!empty($textClass)) $buttonText = "<span class='$textClass'>$buttonText</span>";
 		$out = "<button $attrs>$buttonText</button>";
 		if($this->getSetting('small')) $out = "<small>$out</small>";
@@ -196,7 +201,7 @@ class InputfieldSubmit extends Inputfield {
 
 		if($this->wire('input')->get('modal')) return '';
 		
-		$config = $this->wire('config');
+		$config = $this->wire()->config;
 		$file = $config->debug ? 'dropdown.js' : 'dropdown.min.js';
 		$config->scripts->add($config->urls->InputfieldSubmit . $file);
 		$numValues = 0;
@@ -238,8 +243,9 @@ class InputfieldSubmit extends Inputfield {
 			$out = "<input $attr />" . str_replace("<ul ", "<ul data-pw-dropdown-input='#$inputID' ", $out);
 		}
 	
+		$required = $this->dropdownRequired ? 'true' : 'false';
 		// script to initialize this dropdown immediately
-		$out .= "<script" . ">InputfieldSubmitDropdown.init('#{$this->id}')</script>";
+		$out .= "<script" . ">InputfieldSubmitDropdown.init('#{$this->id}', null, $required);</script>";
 		
 		return $out; 
 	}

wire/modules/Inputfield/InputfieldSubmit/dropdown.js

@@ -7,6 +7,8 @@
  *
  */
 var InputfieldSubmitDropdown = {
+	
+	itemClicked: false, 
 
 	/**
 	 * Click event for dropdown item
@@ -26,6 +28,8 @@ var InputfieldSubmitDropdown = {
 		
 		$button = $dropdown.data('pw-button');
 		
+		InputfieldSubmitDropdown.itemClicked = true;
+		
 		if($a.hasClass('pw-button-dropdown-default')) {
 			
 			// just click the button
@@ -67,6 +71,8 @@ var InputfieldSubmitDropdown = {
 	
 		// click the button
 		$button.click();
+		
+		InputfieldSubmitDropdown.itemClicked = false;
 
 		return false;	
 	},
@@ -82,9 +88,10 @@ var InputfieldSubmitDropdown = {
 	 * 
 	 * @param $dropdown An instance of ul.pw-button-dropdown
 	 * @param $mainButton An instance of button
+	 * @param bool required
 	 * 
 	 */
-	initDropdown: function($dropdown, $mainButton) {
+	initDropdown: function($dropdown, $mainButton, required) {
 		
 		var $toggleButton = $("<button type='button'><i class='fa fa-angle-down'></i></button>")
 			.attr('id', 'pw-dropdown-toggle-' + $mainButton.attr('id'));
@@ -155,6 +162,19 @@ var InputfieldSubmitDropdown = {
 			$(this).show();
 		});
 		
+		if(required) {
+			$mainButton.addClass('pw-button-dropdown-required');
+			// make a click on the main button open/close the dropdown
+			$mainButton.on('click', function() {
+				if(InputfieldSubmitDropdown.itemClicked) {
+					return true;
+				} else {
+					$toggleButton.mousedown();
+					return false;
+				}
+			});  
+		}
+		
 	},
 
 	/**
@@ -162,10 +182,14 @@ var InputfieldSubmitDropdown = {
 	 * 
 	 * @param buttonSelector String selector to find button(s) or jQuery object of button instances
 	 * @param $dropdownTemplate Optionally specify template to use (for cases where multiple buttons share same dropdown)
+	 * @param bool required Dropdown selection required? (i.e. clicking submit opens dropdown)
 	 * @returns {boolean} False if dropdowns not setup, true if they were
 	 * 
 	 */
-	init: function(buttonSelector, $dropdownTemplate) {
+	init: function(buttonSelector, $dropdownTemplate, required) {
+		
+		if(typeof $dropdownTemplate === "undefined") $dropdownTemplate = null;
+		if(typeof required === "undefined") required = false;
 	
 		// don't use dropdowns when in modal window
 		if($('body').hasClass('modal')) {
@@ -174,19 +198,19 @@ var InputfieldSubmitDropdown = {
 		}
 		
 		var $buttons = (typeof buttonSelector == "string") ? $(buttonSelector) : buttonSelector; 
-		
+
 		$buttons.each(function() {
 			var $button = $(this);
-			if(typeof $dropdownTemplate != "undefined") {
+			if($dropdownTemplate !== null) {
 				$dropdownTemplate.addClass('pw-button-dropdown-template');
-				InputfieldSubmitDropdown.initDropdown($dropdownTemplate, $button);	
+				InputfieldSubmitDropdown.initDropdown($dropdownTemplate, $button, required);
 			} else {
 				var $dropdown = $('#' + $(this).prop('id') + '_dropdown');
-				if($dropdown.length) InputfieldSubmitDropdown.initDropdown($dropdown, $button);
+				if($dropdown.length) InputfieldSubmitDropdown.initDropdown($dropdown, $button, required);
 			}
 		});
 		
 		return true; 
 	}
 	
-}
+}

wire/modules/Inputfield/InputfieldSubmit/dropdown.min.js

@@ -1 +1 @@
-var InputfieldSubmitDropdown={click:function(){var $a=$(this);var href=$a.attr("href");var $dropdown=$a.closest(".pw-button-dropdown");var $button;var $input=null;if(!$dropdown.length)return true;$button=$dropdown.data("pw-button");if($a.hasClass("pw-button-dropdown-default")){}else{var value=$a.attr("data-pw-dropdown-value");var selector=$dropdown.attr("data-pw-dropdown-input");var dropdownSubmit=1;if(!value)return true;if(selector){$input=$(selector);if(!$input.length)return true;$input.val(value)}else if(href.length>1){return true}if($button){if($input){dropdownSubmit=$input.attr("data-pw-dropdown-submit");dropdownSubmit=typeof dropdownSubmit=="undefined"?0:parseInt(dropdownSubmit)}if(dropdownSubmit>0)$button.attr("value",value)}}if(!$button)return true;$(":input:focus").blur();$button.click();return false},dropdownCnt:0,initDropdown:function($dropdown,$mainButton){var $toggleButton=$("<button type='button'><i class='fa fa-angle-down'></i></button>").attr("id","pw-dropdown-toggle-"+$mainButton.attr("id"));$mainButton.after($toggleButton);$toggleButton.button();var $dropdownTemplate=null;if($dropdown.hasClass("pw-button-dropdown-template")){$dropdownTemplate=$dropdown;$dropdown=$dropdownTemplate.clone();$dropdownTemplate.hide()}InputfieldSubmitDropdown.dropdownCnt++;var dropdownCntClass="pw-button-dropdown-"+InputfieldSubmitDropdown.dropdownCnt;$dropdown.addClass("pw-dropdown-menu pw-dropdown-menu-rounded pw-button-dropdown-init "+dropdownCntClass);$dropdown.data("pw-button",$mainButton);var $buttonText=$mainButton.find(".ui-button-text");var labelText=$.trim($buttonText.text());var labelHTML=$buttonText.html();$dropdown.find("a").each(function(){var $a=$(this);if($dropdownTemplate){var html=$a.html();if(html.indexOf("%s")>-1)$a.html(html.replace("%s",labelText))}$a.click(InputfieldSubmitDropdown.click)});$mainButton.addClass("pw-button-dropdown-main");$toggleButton.after($dropdown).addClass("pw-dropdown-toggle-click pw-dropdown-toggle pw-button-dropdown-toggle").attr("data-pw-dropdown","."+dropdownCntClass);if($mainButton.hasClass("ui-priority-secondary"))$toggleButton.addClass("ui-priority-secondary");if($mainButton.hasClass("pw-head-button"))$toggleButton.addClass("pw-head-button");$toggleButton.click(function(){return false}).on("pw-button-dropdown-off",function(){$(this).siblings(".pw-button-dropdown-main").removeClass("pw-button-dropdown-main").addClass("pw-button-dropdown-disabled");$(this).hide()}).on("pw-button-dropdown-on",function(){$(this).siblings(".pw-button-dropdown-disabled").addClass("pw-button-dropdown-main").removeClass("pw-button-dropdown-disabled");$(this).show()})},init:function(buttonSelector,$dropdownTemplate){if($("body").hasClass("modal")){$("ul.pw-button-dropdown").hide();return false}var $buttons=typeof buttonSelector=="string"?$(buttonSelector):buttonSelector;$buttons.each(function(){var $button=$(this);if(typeof $dropdownTemplate!="undefined"){$dropdownTemplate.addClass("pw-button-dropdown-template");InputfieldSubmitDropdown.initDropdown($dropdownTemplate,$button)}else{var $dropdown=$("#"+$(this).prop("id")+"_dropdown");if($dropdown.length)InputfieldSubmitDropdown.initDropdown($dropdown,$button)}});return true}};
+var InputfieldSubmitDropdown={itemClicked:false,click:function(){var $a=$(this);var href=$a.attr("href");var $dropdown=$a.closest(".pw-button-dropdown");var $button;var $input=null;if(!$dropdown.length)return true;$button=$dropdown.data("pw-button");InputfieldSubmitDropdown.itemClicked=true;if($a.hasClass("pw-button-dropdown-default")){}else{var value=$a.attr("data-pw-dropdown-value");var selector=$dropdown.attr("data-pw-dropdown-input");var dropdownSubmit=1;if(!value)return true;if(selector){$input=$(selector);if(!$input.length)return true;$input.val(value)}else if(href.length>1){return true}if($button){if($input){dropdownSubmit=$input.attr("data-pw-dropdown-submit");dropdownSubmit=typeof dropdownSubmit=="undefined"?0:parseInt(dropdownSubmit)}if(dropdownSubmit>0)$button.attr("value",value)}}if(!$button)return true;$(":input:focus").blur();$button.click();InputfieldSubmitDropdown.itemClicked=false;return false},dropdownCnt:0,initDropdown:function($dropdown,$mainButton,required){var $toggleButton=$("<button type='button'><i class='fa fa-angle-down'></i></button>").attr("id","pw-dropdown-toggle-"+$mainButton.attr("id"));$mainButton.after($toggleButton);$toggleButton.button();var $dropdownTemplate=null;if($dropdown.hasClass("pw-button-dropdown-template")){$dropdownTemplate=$dropdown;$dropdown=$dropdownTemplate.clone();$dropdownTemplate.hide()}InputfieldSubmitDropdown.dropdownCnt++;var dropdownCntClass="pw-button-dropdown-"+InputfieldSubmitDropdown.dropdownCnt;$dropdown.addClass("pw-dropdown-menu pw-dropdown-menu-rounded pw-button-dropdown-init "+dropdownCntClass);$dropdown.data("pw-button",$mainButton);var $buttonText=$mainButton.find(".ui-button-text");var labelText=$.trim($buttonText.text());var labelHTML=$buttonText.html();$dropdown.find("a").each(function(){var $a=$(this);if($dropdownTemplate){var html=$a.html();if(html.indexOf("%s")>-1)$a.html(html.replace("%s",labelText))}$a.click(InputfieldSubmitDropdown.click)});$mainButton.addClass("pw-button-dropdown-main");$toggleButton.after($dropdown).addClass("pw-dropdown-toggle-click pw-dropdown-toggle pw-button-dropdown-toggle").attr("data-pw-dropdown","."+dropdownCntClass);if($mainButton.hasClass("ui-priority-secondary"))$toggleButton.addClass("ui-priority-secondary");if($mainButton.hasClass("pw-head-button"))$toggleButton.addClass("pw-head-button");$toggleButton.click(function(){return false}).on("pw-button-dropdown-off",function(){$(this).siblings(".pw-button-dropdown-main").removeClass("pw-button-dropdown-main").addClass("pw-button-dropdown-disabled");$(this).hide()}).on("pw-button-dropdown-on",function(){$(this).siblings(".pw-button-dropdown-disabled").addClass("pw-button-dropdown-main").removeClass("pw-button-dropdown-disabled");$(this).show()});if(required){$mainButton.addClass("pw-button-dropdown-required");$mainButton.on("click",function(){if(InputfieldSubmitDropdown.itemClicked){return true}else{$toggleButton.mousedown();return false}})}},init:function(buttonSelector,$dropdownTemplate,required){if(typeof $dropdownTemplate==="undefined")$dropdownTemplate=null;if(typeof required==="undefined")required=false;if($("body").hasClass("modal")){$("ul.pw-button-dropdown").hide();return false}var $buttons=typeof buttonSelector=="string"?$(buttonSelector):buttonSelector;$buttons.each(function(){var $button=$(this);if($dropdownTemplate!==null){$dropdownTemplate.addClass("pw-button-dropdown-template");InputfieldSubmitDropdown.initDropdown($dropdownTemplate,$button,required)}else{var $dropdown=$("#"+$(this).prop("id")+"_dropdown");if($dropdown.length)InputfieldSubmitDropdown.initDropdown($dropdown,$button,required)}});return true}};