From 1919593bb993e0e3a6d2e65a8bab99c43670dc87 Mon Sep 17 00:00:00 2001
From: Joel Bradshaw <joel@vivor.com>
Date: Wed, 26 May 2021 18:26:44 -0700
Subject: [PATCH 1/2] Add failing tests

---
 .../components/ui-checkbox-test.js            | 23 +++++++++++-
 tests/integration/components/ui-radio-test.js | 36 +++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/tests/integration/components/ui-checkbox-test.js b/tests/integration/components/ui-checkbox-test.js
index c0d3d0c20..77e8010a1 100644
--- a/tests/integration/components/ui-checkbox-test.js
+++ b/tests/integration/components/ui-checkbox-test.js
@@ -90,4 +90,25 @@ test('setting readonly ignores click', function(assert) {
   this.$('.ui.checkbox').click();
   assert.equal(true, this.get('checked'));
   assert.equal(count, 1, 'onChange should have only been called once');
-});
\ No newline at end of file
+});
+
+test('setting readonly to null allows click', function(assert) {
+  assert.expect(3);
+
+  let count = 0;
+  this.set('changed', (value) => {
+    this.set('checked', value);
+    count++;
+  });
+
+  this.set('checked', false);
+  this.set('readonly', null);
+  this.render(hbs`
+    {{ui-checkbox label="Make my profile visible" checked=checked readonly=readonly onChange=(action changed)}}
+  `);
+
+  assert.equal(this.$('.ui.checkbox').length, 1);
+  this.$('.ui.checkbox').click();
+  assert.equal(true, this.get('checked'));
+  assert.equal(count, 1, 'onChange should have only been called once');
+});
diff --git a/tests/integration/components/ui-radio-test.js b/tests/integration/components/ui-radio-test.js
index ccfbaaf09..58d0c029f 100644
--- a/tests/integration/components/ui-radio-test.js
+++ b/tests/integration/components/ui-radio-test.js
@@ -216,6 +216,42 @@ test('setting readonly ignores click', function(assert) {
   assert.equal(count, 1, 'onChange should have been called only once');
 });
 
+test('setting readonly to null allows click', function(assert) {
+  assert.expect(4);
+
+  let count = 0;
+  this.set('changed', (value) => {
+    this.set('frequency', value);
+    count++;
+  });
+
+  this.set('checked', false);
+  this.set('readonly', null);
+  this.set('frequency', 'weekly');
+  this.render(hbs`
+    <div class="ui form">
+      <div class="grouped inline fields">
+        <div class="field">
+          {{ui-radio name="frequency" label="Once a week" value='weekly' current=frequency onChange=(action changed)}}
+        </div>
+        <div class="field">
+          {{ui-radio name="frequency" label="2-3 times a week" value='biweekly' current=frequency readonly=readonly onChange=(action changed)}}
+        </div>
+        <div class="field">
+          {{ui-radio name="frequency" label="Once a day" value='daily' current=frequency onChange=(action changed)}}
+        </div>
+      </div>
+    </div>
+  `);
+
+  assert.equal(this.$('.ui.radio').length, 3);
+  this.$('.ui.radio')[1].click();
+
+  assert.equal('biweekly', this.get('frequency'));
+  assert.ok(this.$(this.$('.ui.radio')[1]).hasClass('checked'));
+  assert.equal(count, 1, 'onChange should have been called only once');
+});
+
 test('setting binded value updates to current', function(assert) {
   assert.expect(7);
 

From 18244ed6a1b12bdf56cfbe9f5534f4833c1d09e6 Mon Sep 17 00:00:00 2001
From: Joel Bradshaw <joel@vivor.com>
Date: Wed, 26 May 2021 17:59:29 -0700
Subject: [PATCH 2/2] Don't set read-only class if readonly is null

toggleClass() requires a boolean value, not just a truthy/falsy one.
When readonly is null, the current code results in the read-only class
being toggled (since null is treated the same as the argument not being
provided), resutling in indeterminate results depending on what the
previous value of readonly was.

To avoid this surprising behavior, just coerce the value of readonly to
a boolean before passing it to toggleClass(), so that null will always
result in no read-only class, same as if the readonly attribute was not
provided.
---
 addon/mixins/checkbox.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/addon/mixins/checkbox.js b/addon/mixins/checkbox.js
index 39fc84c5c..5538b854c 100644
--- a/addon/mixins/checkbox.js
+++ b/addon/mixins/checkbox.js
@@ -20,7 +20,7 @@ var CheckboxMixin = Ember.Mixin.create(Base, {
       settings.onChange = this.get('_onChange');
     }
     if (this._hasOwnProperty(this.attrs, 'readonly') || this.get('readonly') != null) {
-      this.$().toggleClass('read-only', this.get('readonly'));
+      this.$().toggleClass('read-only', Boolean(this.get('readonly')));
     }
   },
 
@@ -83,7 +83,7 @@ var CheckboxMixin = Ember.Mixin.create(Base, {
     // Handle readonly
     if (attrName === 'readonly') {
       // We need to add a class verses updating the property, since semantic is caching the value internall
-      return this.$().toggleClass('read-only', attrValue);
+      return this.$().toggleClass('read-only', Boolean(attrValue));
     }
     // Default
     return this._super(...arguments);