Better way to add a free text field option to a mat-select-list in Angular-CodePudding

I have several lists of mat-select-list check boxes in a form on one of my apps that are all structured like this:

    <div >
      <div >
        <h5>13. Alliance/Decision Support</h5>
      </div>
      <mat-selection-list #allianceDecisionSupport (selectionChange)="onApplicationSelection(1, $event.options)">
        <mat-list-option   checkboxPosition="before" value="Crystal Reports Access">Crystal Reports Access</mat-list-option>
        <mat-list-option   checkboxPosition="before" value="ADS Database Access">ADS Database Access</mat-list-option>
        <mat-list-option   checkboxPosition="before" [value]="other13.value">Other <input #other13 type="text"  id="other13" name="other13" placeholder="Enter data as required..."/></mat-list-option>
      </mat-selection-list>
    </div>

The only problem I have is that when the user clicks on the text field to type it checks the box beside it and my client doesn't like that. They want the user to have to check the check box and then type or vise versa. Either way, I just need the box to not be checked just by typing; the user should have to click checkbox itself. If it isn't clear, the free text field is the value of the the last checkbox option. Everything else works correctly, the client just doesn't like that the check appears when the user clicks to type.

Maybe what I have done is not the best way to do this and maybe there's a completely better method. I'm open to pretty much any option here.

If you need any additional information please let me know.

CodePudding user response：

just add (click)="$event.stopPropagation()" in input

<mat-list-option   checkboxPosition="before" [value]="other13.value">
    Other 
    <input (click)="$event.stopPropagation()" #other13 
        type="text"  id="other13" name="other13" 
        placeholder="Enter data as required..."/>
</mat-list-option>