Jak udało się poprzedni problem tak szybko rozwiązać, to może szybko pójdę za ciosem:). Przypadek jest następujący: w miejsce ukrytego inputa radio buttona podstawiłem konkretne obrazki, które zmieniają się po kliknięciu (to <a>
przed <img>
konieczne na potrzeby explorera, bo bez tego event się w ogóle nie włączy). Problem w tym, że jeśli klikniemy gdziekolwiek na divie questionnaire-option
poza radiobuttonem false, automatycznie jako event.target
zaznacza się input-true-{{record.controlName}}
. W praktyce wygląda to tak, że jeśli operujemy stricte na radiobuttonach, wszystko wygląda w porządku, ale wystarczy wyjechać myszką lekko w prawo, poza ich obręb, i automatycznie zostaje zaznaczony radiobutton z true.
Idealnie byłoby, gdyby tylko na poziomie labela dało się zaznaczyć któryś z radiobuttonów. Próbowałem jeszcze zawęzić div, ale nawet jeśli tak się zrobi, problem pozostaje.
<div class="questionnaire-option">
<label class="hand">
<input id="input-true-{{record.controlName}}" type="radio"
(change)="handleChange(record, $event)" formControlName="{{record.controlName}}" [value]="true">
<a (click)="handleChange(record, $event)"><img id="img-true-{{record.controlName}}" class="pb-1"
src="./assets/ic_radio_select.svg"></a>
<span class="custom-blue"> Yes</span>
</label>
<label class="hand ml-2">
<input id="input-false-{{record.controlName}}" type="radio"
(change)="handleChange(record, $event)" formControlName="{{record.controlName}}" [value]="false">
<a (click)="handleChange(record, $event)"><img id="img-false-{{record.controlName}}" class="pb-1"
src="./assets/ic_radio_select.svg"></a>
<span class="custom-blue"> No</span>
</label>
<div class="display-inline ml-4" [@slideInOut]="record.slideInOutAnimation">
<img class="pb-1" src="./assets/ic_error.svg"> <span class="color-error ml-2">Please
select
<i>Yes</i>
or
<i>No</i>.</span>
</div>
</div>
CSS zmodyfikowałem następująco:
// ukrywa input
[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
[type="radio"] + img {
cursor: pointer;
}