Make selected value non-clickable

A native HTML select cannot be triggered programatically to open,
because this would post a security risk, so clicking on the selected
value that is not part of the select element won't make the options
dropdown open. In order to make the selected value look like part
of the whole select flow, an absolute positioning is needed, which
was already implemented. The issue was that the element would still
be clickable, so cancelling the pointer events will make the click
trigger go through it, directly to the select element.

Issue: PER-10229 Archive-member-invite, access-role-dropdown, click area buggy

Author: aasandei-vsp

src/app/shared/components/form-input/form-input.component.html

@@ -31,7 +31,7 @@
 }
 @if (type === 'select') {
 	<div
-		class="input-vertical-select-placeholder"
+		class="input-vertical-select-placeholder selected-option"
 		[class.selected]="control.value"
 	>
 		{{ getOptionTextFromValue(control.value) || placeholder }}

src/app/shared/components/form-input/form-input.component.scss

@@ -3,3 +3,7 @@
 	cursor: not-allowed;
 	user-select: none;
 }
+
+.selected-option {
+	pointer-events: none;
+}