How to open a new mat-select menu when the cursor moves over the mat-option selected item

I am trying to create a flow where the user opens a form , in which I have created multiple mat-options for Duration such as “Yesterday”,”Last Week”, “Last Month” , “Custom” etc .Currently my Front End looks like following. So when the user selects the “Custom” button, in that case it should open a new form/dialog to the left/right hand side where the user can then enter the start and end dates.

enter image description here

<div align="center">
    <form [formGroup]="DatesFormGroup">
        <mat-form-field style="margin-right: 40px;">
            <mat-label>Choose Duration</mat-label>
            <mat-select formControlName="dates" (selectionChange)="dateSelectionChanged()">
                <mat-option value="Yesterday">Yesterday</mat-option>
                <mat-option value="Week">Last 1 Week</mat-option>
                <mat-option value="Month">Last 1 Month</mat-option>
                <mat-option value="3_Months">Last 3 Months</mat-option>
                <mat-option value="Year">Last 1 Year</mat-option>
                <mat-option value="Custom">Custom</mat-option>
            </mat-select>
        </mat-form-field>
    </form>     
</div>

I am new to Angular, hence the code might not look very clean.
Will appreciate any help on this.

Source: New feed
Source Url How to open a new mat-select menu when the cursor moves over the mat-option selected item