PER-10229-fix-archive-invite-dropdown

Implemented a workaround to allow a custom div/button to toggle the open state of a native <select>
by adjusting its size attribute. This mimics dropdown behavior without relying on unsupported
programmatic opening. Also handles closing on selection.

Author: crisnicandrei

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

@@ -14,24 +14,26 @@
   [disabled]="disabled"
   [readOnly]="disabled"
 />
-<select
-  *ngIf="type === 'select'"
-  class="form-control input-vertical"
-  [ngClass]="{ placeholder: !control.value }"
-  [id]="fieldName"
-  [name]="fieldName"
-  [formControl]="control"
->
-  <option *ngFor="let option of selectOptions" [value]="option.value">
-    {{ option.text }}
-  </option>
-</select>
-<div
-  class="input-vertical-select-placeholder"
-  *ngIf="type === 'select'"
-  [class.selected]="control.value"
->
-  {{ getOptionTextFromValue(control.value) || placeholder }}
+<div class="select-wrapper" *ngIf="type === 'select'">
+  <select
+    class="form-control input-vertical real-select"
+    [ngClass]="{ placeholder: !control.value }"
+    [id]="fieldName"
+    [name]="fieldName"
+    [formControl]="control"
+  >
+    <option *ngFor="let option of selectOptions" [value]="option.value">
+      {{ option.text }}
+    </option>
+  </select>
+  <label
+    class="open-toggle input-vertical-select-placeholder"
+    [attr.for]="fieldName"
+    [class.selected]="control.value"
+    (click)="openSelect()"
+  >
+    {{ getOptionTextFromValue(control.value) || placeholder }}
+  </label>
 </div>
 <div class="input-vertical-error" [ngClass]="{ hidden: !errors }">
   {{ errors }}

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

@@ -3,3 +3,41 @@
   cursor: not-allowed;
   user-select: none;
 }
+
+.select-wrapper {
+  position: relative;
+  width: 100%;
+  border: 1px solid #ced4da;
+  padding: 10px 0px;
+}
+
+.real-select {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  z-index: 2;
+  cursor: pointer;
+}
+
+.input-vertical-select-placeholder {
+  position: relative;
+  z-index: 1;
+}
+
+.select-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.styled-select {
+  width: 100%;
+  cursor: pointer;
+}
+
+.open-toggle {
+  cursor: pointer;
+  top: 24px;
+}

src/app/shared/components/form-input/form-input.component.spec.ts

@@ -0,0 +1,106 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+  UntypedFormControl,
+} from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import {
+  FormInputComponent,
+  FormInputSelectOption,
+} from './form-input.component';
+
+describe('FormInputComponent', () => {
+  let component: FormInputComponent;
+  let fixture: ComponentFixture<FormInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FormInputComponent],
+      imports: [FormsModule, ReactiveFormsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FormInputComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render a text input when type is not "select"', () => {
+    component.type = 'text';
+    component.fieldName = 'username';
+    component.placeholder = 'Enter username';
+    component.control = new UntypedFormControl('');
+    fixture.detectChanges();
+
+    const inputEl = fixture.debugElement.query(By.css('input.form-control'));
+
+    expect(inputEl).toBeTruthy();
+    expect(inputEl.nativeElement.placeholder).toBe('Enter username');
+  });
+
+  it('should render a select when type is "select"', () => {
+    component.type = 'select';
+    component.fieldName = 'country';
+    component.placeholder = 'Select country';
+    component.selectOptions = [
+      { value: 'us', text: 'USA' },
+      { value: 'ca', text: 'Canada' },
+    ];
+    component.control = new UntypedFormControl('');
+    fixture.detectChanges();
+
+    const selectEl = fixture.debugElement.query(By.css('select'));
+
+    expect(selectEl).toBeTruthy();
+    const options = selectEl.queryAll(By.css('option'));
+
+    expect(options.length).toBe(2);
+  });
+
+  it('should toggle openStatus when openSelect() is called', () => {
+    expect(component.openStatus).toBeFalse();
+    component.openSelect();
+
+    expect(component.openStatus).toBeTrue();
+    component.openSelect();
+
+    expect(component.openStatus).toBeFalse();
+  });
+
+  it('should reset openStatus and alert when handleChange() is called', () => {
+    spyOn(window, 'alert');
+    component.openStatus = true;
+    component.handleChange();
+
+    expect(component.openStatus).toBeFalse();
+    expect(window.alert).toHaveBeenCalledWith('Element selected... closed');
+  });
+
+  it('should display the correct option text from value', () => {
+    const options: FormInputSelectOption[] = [
+      { text: 'Apple', value: 'a' },
+      { text: 'Banana', value: 'b' },
+    ];
+    component.selectOptions = options;
+    const result = component.getOptionTextFromValue('b');
+
+    expect(result).toBe('Banana');
+  });
+
+  it('should hide label if value is empty and type is number', () => {
+    component.type = 'number';
+    component.control = new UntypedFormControl('');
+
+    expect(component.isLabelHidden()).toBeTrue();
+  });
+
+  it('should not hide label if type is date', () => {
+    component.type = 'date';
+    component.control = new UntypedFormControl('');
+
+    expect(component.isLabelHidden()).toBeFalse();
+  });
+});

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

@@ -6,6 +6,7 @@ import {
   ElementRef,
   AfterViewInit,
   HostBinding,
+  ViewChild,
 } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { getFormInputError } from '@shared/utilities/forms';
@@ -47,6 +48,8 @@ export class FormInputComponent implements OnInit, AfterViewInit {
   @HostBinding('class.right-align') rightAlign = false;
   @HostBinding('class.input-vertical') inputVertical = true;
 
+  openStatus = false;
+
   @Input() config: FormInputConfig;
 
   constructor(private element: ElementRef) {}
@@ -125,4 +128,13 @@ export class FormInputComponent implements OnInit, AfterViewInit {
   getOptionTextFromValue(value: string) {
     return find(this.selectOptions, { value })?.text;
   }
+
+  openSelect() {
+    this.openStatus = !this.openStatus;
+  }
+
+  handleChange() {
+    this.openStatus = false;
+    alert('Element selected... closed');
+  }
 }