Afform - Add "clear" button to non-required radios
authorColeman Watts <coleman@civicrm.org>
Mon, 9 May 2022 16:17:13 +0000 (12:17 -0400)
committerColeman Watts <coleman@civicrm.org>
Thu, 28 Jul 2022 17:53:45 +0000 (13:53 -0400)
Fixes dev/core#3450
Allows the value of radio buttons to be unset if the field is not required,
consistent with the rest of the CiviCRM UI.

ext/afform/admin/ang/afGuiEditor/inputType/Radio.html
ext/afform/core/ang/af/fields/Radio.html

index b0042d68f7765aa12082213ba94a40a413e9290b..e7984bd39254465fc7cd73156da5edad88b0c51d 100644 (file)
@@ -3,4 +3,7 @@
     <input class="crm-form-radio" type="radio" ng-checked="defaultValueContains(opt.id)" ng-click="toggleDefaultValueItem(opt.id)" >
     {{ opt.label }}
   </label>
+  <a href ng-if="!getProp('required')" class="crm-hover-button" title="{{:: ts('Clear Default') }}" ng-click="toggleDefaultValueItem(getSet('afform_default'))">
+    <i class="crm-i fa-times" aria-hidden="true"></i>
+  </a>
 </div>
index 225250918a308ed990a4c43be6cc4b9fbde3bfa3..bd50c6d88df68bda3a776182d75f52c197830fad 100644 (file)
@@ -2,3 +2,6 @@
   <input class="crm-form-radio" type="radio" ng-model="dataProvider.getFieldData()[$ctrl.fieldName]" ng-value="opt.id" />
   {{:: opt.label }}
 </label>
+<a ng-if="!$ctrl.defn.required" class="crm-hover-button" title="{{:: ts('Clear') }}" ng-show="!!dataProvider.getFieldData()[$ctrl.fieldName] || dataProvider.getFieldData()[$ctrl.fieldName] === false || dataProvider.getFieldData()[$ctrl.fieldName] === 0" ng-click="dataProvider.getFieldData()[$ctrl.fieldName] = null">
+  <i class="crm-i fa-times" aria-hidden="true"></i>
+</a>