Merge pull request #2585 from QuizandSurveyMaster/CU-86cvpbte7-contac…

…t-tab-ui-fix Fix contact tab UI and behaviour
QuizandSurveyMaster · Jun 18, 2024 · 6232f1e · 6232f1e
2 parents 85d8247 + e443b72
commit 6232f1e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 8 deletions.
diff --git a/css/common.css b/css/common.css
@@ -256,7 +256,7 @@ footer.qsm-popup__footer button.qsm-popup-secondary-button:hover {
 	align-content: center;
 }
 .qsm-quiz-container .qsm-contact-type-checkbox input {
-	margin: 0 5px 0 3px;
+	margin: 0 5px 6px 3px;
 }
 .mlw_qmn_question_number {
 	font-weight: bold;

diff --git a/js/qsm-admin.js b/js/qsm-admin.js
@@ -4115,4 +4115,28 @@ var import_button;
         });
     } );
 
+}(jQuery));
+
+(function ($) {
+    $(document).ready(function() {
+        var $settingsFields = $('.settings-field');
+        var $popups = $('.qsm-contact-form-field-settings');
+
+        // Function to hide all popups
+        function qsmHideAllPopups() {
+            $popups.hide();
+        }
+
+        // Close popup on document click if popup is open and clicking outside
+        $(document).on('click', function(event) {
+            if (!$settingsFields.is(event.target) && $settingsFields.has(event.target).length === 0) {
+                qsmHideAllPopups();
+            }
+        });
+
+        // Prevent the click event from propagating to the document when clicking inside the popup
+        $popups.on('click', function(event) {
+            event.stopPropagation();
+        });
+    });    
 }(jQuery));
diff --git a/php/classes/class-qsm-contact-manager.php b/php/classes/class-qsm-contact-manager.php
@@ -413,6 +413,8 @@ public static function generate_contact_field( $field, $index, $quiz_options, $d
 				$class .= ' mlwRequiredRadio ';
 			}elseif ( 'select' === $field["type"] ) {
 				$class .= 'qsmRequiredSelect';
+			}elseif ( 'number' === $field["type"] ) {
+				$class .= 'mlwRequiredNumber';
 			}else {
 				$class .= 'mlwRequiredText qsm_required_text';
 				if ( 'checkbox' === $field["type"] ) {
@@ -552,7 +554,7 @@ public static function generate_contact_field( $field, $index, $quiz_options, $d
 				?>
 					<span class='mlw_qmn_question qsm_question'><label for="contact_field_<?php echo esc_attr( $index ) ?>"><?php echo esc_attr( $field_label ); ?></label></span>
 				<?php } ?>
-				<input type='number' class='mlwRequiredNumber <?php echo esc_attr( $class ); ?>' <?php echo $fieldAttr; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> <?php if ( isset( $field['maxlength'] ) && 0 < intval( $field['maxlength'] ) ) : ?>maxlength='<?php echo intval( $field['maxlength'] ); ?>' oninput='maxLengthCheck(this)' <?php endif; ?> />
+				<input type='number' class='<?php echo esc_attr( $class ); ?>' <?php echo $fieldAttr; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> <?php if ( isset( $field['maxlength'] ) && 0 < intval( $field['maxlength'] ) ) : ?>maxlength='<?php echo intval( $field['maxlength'] ); ?>' oninput='maxLengthCheck(this)' <?php endif; ?> />
 				<?php
 				break;
 
@@ -567,7 +569,7 @@ public static function generate_contact_field( $field, $index, $quiz_options, $d
 				/**
 				 * Add options validation
 				 */
-				if ( isset( $field['options'] ) ) {
+				if ( isset( $field['options'] ) && !empty( trim( $field['options'] ) ) ) {
 				?>
 				<span class='mlw_qmn_question qsm_question'><?php echo esc_attr( $field_label ); ?></span>
 				<div class='qmn_radio_answers <?php echo esc_attr( $class ); ?>'>
@@ -589,8 +591,8 @@ class="qmn_quiz_radio"
 						</div>
 						<?php
 					}
-				}
 				echo '</div>';
+			}
 				break;
 			case 'select':
 				// Filer Value
@@ -601,7 +603,7 @@ class="qmn_quiz_radio"
 					$fieldAttr .= " autocomplete='off' ";
 				}
 				// If REQUIRED is set then assigning the required class
-				if ( isset( $field['options'] ) ) {
+				if ( isset( $field['options'] ) && !empty( trim( $field['options'] ) ) ) {
 				?>
 				<span class='mlw_qmn_question qsm_question'><label for="contact_field_<?php echo esc_attr( $index ) ?>"><?php echo esc_attr( $field_label ); ?></label></span>
 				<select class='<?php echo esc_attr( $class ); ?>' name='contact_field_<?php echo esc_attr( $index ); ?>' id='contact_field_<?php echo esc_attr( $index ); ?>'>
@@ -620,10 +622,8 @@ class="qmn_quiz_radio"
 						</option>
 						<?php
 					}
+				echo '</select>';
 				}
-				?>
-				</select>
-				<?php
 				break;
 			default:
 				do_action( 'qsm_extra_contact_form_field_display', $field, $quiz_options, $index,$default_value );