Select Improver: Remove inital flashing of old select (#1917)

TASVideos · Jul 13, 2024 · 8887c87 · 8887c87
1 parent d3c5e78
commit 8887c87
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 1 deletion.
diff --git a/TASVideos/Pages/Shared/_Layout.cshtml b/TASVideos/Pages/Shared/_Layout.cshtml
@@ -164,6 +164,7 @@
 		</script>
 	}
 	<script condition="ViewData.UsesSelectImprover()" src="/js/select-improver.js"></script>
+	<noscript condition="ViewData.UsesSelectImprover()"><style>.d-none-except-noscript { display: block !important; }</style></noscript>
 	<script condition="ViewData.UsesUserSearch()" src="/js/user-search.js"></script>
 	<script condition="ViewData.UsesBackupText()" src="/js/backup-text.js"></script>
 	<script condition="ViewData.UsesStringList()" src="/js/string-list.js"></script>

diff --git a/TASVideos/TagHelpers/Attributes/MultiSelectTagHelper.cs b/TASVideos/TagHelpers/Attributes/MultiSelectTagHelper.cs
@@ -18,6 +18,7 @@ public override void Process(TagHelperContext context, TagHelperOutput output)
 		if (Multiselect)
 		{
 			output.Attributes.Add("data-multiselect", "true");
+			output.AddCssClass("d-none-except-noscript");
 			ViewContext.ViewData.UseSelectImprover();
 		}
 	}

diff --git a/TASVideos/wwwroot/css/partials/_customizations.scss b/TASVideos/wwwroot/css/partials/_customizations.scss
@@ -716,4 +716,8 @@ top-button-bar {
 			padding: 0.5em;
 		}
 	}
+}
+
+.d-none-except-noscript {
+	display: none !important;
 }
diff --git a/TASVideos/wwwroot/js/select-improver.js b/TASVideos/wwwroot/js/select-improver.js
@@ -103,7 +103,6 @@ function engageSelectImprover(multiSelectId, maxHeight = 250) {
 </div>
 `;
 	let multiSelect = document.getElementById(multiSelectId);
-	multiSelect.classList.add('d-none');
 	let div = document.getElementById(multiSelectId + '_div');
 	div?.remove();
 	multiSelect.insertAdjacentHTML('afterend', initialHtmlToAdd);