FIXED: Issue #20: SGNForm component file input not working

UPDATED: Redesigned "Browse" button of SGNForm component file input
SGNetworksIndia · Aug 11, 2022 · cf0309e · cf0309e
1 parent 85059ce
commit cf0309e
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 14 deletions.
diff --git a/src/css/SGNUIKit-free.css b/src/css/SGNUIKit-free.css
@@ -109,9 +109,13 @@ main > .sgn-center-container {
 }
 
 :root, [class^="sgn-"], [class^="sgn-"] * {
+	--sgn-border-radius-inner-diff: .2rem;
 	--sgn-border-radius-xs: .2rem;
 	--sgn-border-radius-sm: .5rem;
 	--sgn-border-radius-md: 1rem;
+	--sgn-border-inner-radius-xs: calc(var(--sgn-border-radius-xs) - 0rem);
+	--sgn-border-inner-radius-sm: calc(var(--sgn-border-radius-sm) - var(--sgn-border-radius-inner-diff));
+	--sgn-border-inner-radius-md: calc(var(--sgn-border-radius-md) - var(--sgn-border-radius-inner-diff));
 
 	--sgn-shadow-spread: 1rem;
 }
diff --git a/src/css/SGNUIKit-pro.css b/src/css/SGNUIKit-pro.css
@@ -109,9 +109,13 @@ main > .sgn-center-container {
 }
 
 :root, [class^="sgn-"], [class^="sgn-"] * {
+	--sgn-border-radius-inner-diff: .2rem;
 	--sgn-border-radius-xs: .2rem;
 	--sgn-border-radius-sm: .5rem;
 	--sgn-border-radius-md: 1rem;
+	--sgn-border-inner-radius-xs: calc(var(--sgn-border-radius-xs) - 0rem);
+	--sgn-border-inner-radius-sm: calc(var(--sgn-border-radius-sm) - var(--sgn-border-radius-inner-diff));
+	--sgn-border-inner-radius-md: calc(var(--sgn-border-radius-md) - var(--sgn-border-radius-inner-diff));
 
 	--sgn-shadow-spread: 1rem;
 }
diff --git a/src/css/components/SGNForms/inputs/file.css b/src/css/components/SGNForms/inputs/file.css
@@ -11,12 +11,12 @@
 	cursor: pointer;
 }
 
-.sgn-form.sgn-input-file > .sgn-form-wrapper > .sgn-input-wrapper:before {
+.sgn-form.sgn-input-file > .sgn-form-wrapper > .sgn-input-wrapper:after {
 	content: 'Browse';
 	color: inherit;
 	background-color: var(--sgnf-background);
-	padding: var(--padding-xs) var(--padding-md);
-	border-radius: var(--sgn-border-radius-sm) 0 0 var(--sgn-border-radius-sm);
+	padding: var(--padding-sm) var(--padding-md);
+	border-radius: 0 var(--sgn-border-inner-radius-sm) var(--sgn-border-inner-radius-sm) 0;
 	z-index: 0;
 }
 

diff --git a/src/js/components/forms/inputs.js b/src/js/components/forms/inputs.js
@@ -104,6 +104,16 @@
 			return result;
 		}
 
+		function click(node) {
+			try {
+				node.dispatchEvent(new MouseEvent('click'))
+			} catch(e) {
+				const evt = document.createEvent('MouseEvents')
+				evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null)
+				node.dispatchEvent(evt);
+			}
+		}
+
 		const init = () => {
 			//region Variables
 			const nodeName = ($_this.prop('nodeName')) ? $_this.prop('nodeName') : $_this[0].nodeName;
@@ -436,24 +446,14 @@
 
 				$('.sgn-form.sgn-select .form-control').blur();
 				$('.sgn-form.sgn-select.open').removeClass('open');
-				//console.log($wrapper, $input, $this);
 
 				if(!$wrapper.hasClass('active'))
 					$wrapper.removeClass('edited').addClass('active');
 				if($inputGroup.length > 0)
 					$inputGroup.removeClass('edited').addClass('active');
 
-				/*if(!$input.is(':focus'))
-					$input.focus();
-
-				if(!$wrapper.hasClass('sgn-select')) {
-					if(!$input.is(':focus'))
-						$container.removeClass('active');
-					else
-						$wrapper.trigger('sgninput.click');
-				}*/
-
 				$wrapper.trigger('sgninput.click');
+
 				e.preventDefault();
 				return false;
 			});
@@ -487,9 +487,12 @@
 			$input.on('focus', function() {
 				const $container = $(this).parents('.sgn-form');
 
+
 				if(!$container.hasClass('active'))
 					$container.click();
 
+				setTimeout(() => click($(this)[0]), 100);
+
 				$(this).trigger('sgninput.focus');
 			});