I am operating an HTML/Typescript view that connects to a SQL Database. Any time the SQL is altered, the entire webpage reloads. There are several dropdown menus that clients would like to remain open after these reloads, to avoid time spent reopening, only closing once the button from which the dropdown originates is clicked, or a location outside the menu is clicked. Is there a way to ensure an open dropdown menu remains open after a reload?
Here is an example of one such dropdown.
<mat-form-field>
<mat-label>Month</mat-label>
<mat-select formControlName="month" (selectionChange)="isStandardOrCurrentCost()">
<mat-option *ngFor="let month of getAvailableMonths()" [value]="month">{{month}}</mat-option>
</mat-select>
<control-messages [control]="form.get('month')"></control-messages>
</mat-form-field>
Maybe an option you can consider is saving the state of opened dropdowns in the local storage. Whenever the page reload, life cycle methods will be called. Using something like ngAfterViewInit or ngAfterContentInit, you can get the state to see which dropdowns are activated. Then simulate a click on your select element. Use @ViewChild to get the html element and .nativeElement.click() to simulate the click. This is less than optimal and in the best world, you would only reload the component which consumes to SQL data, not the entire page.