minor release

docs/components/input.md

@@ -105,7 +105,7 @@ The `type` attribute controls the type of input the browser renders.
 ```html preview
 <lynk-input type="email" placeholder="Email"></lynk-input>
 <br />
-<lynk-input type="number" placeholder="Number"></lynk-input>
+<lynk-input type="number" placeholder="Number" readonly></lynk-input>
 <br />
 <lynk-input type="date" placeholder="Date"></lynk-input>
 <br />

docs/getting-started/changelog.md

@@ -6,6 +6,10 @@ Components with the <lynk-badge type="warning" pill>Experimental</lynk-badge> ba
 
 <lynk-alert type="info" open>During the beta period, these restrictions may be relaxed in the event of a mission-critical bug. 🐛</lynk-alert>
 
+## 0.9.13
+- Fixed a bug in `<lynk-radio-group>` where clicking outside of a label would throw an "cannot find disabled of null" error.
+- Experimenting with waiting for updateComplete before setting the validity of an `<lynk-input>` that has been disabled
+
 ## 0.9.12
 - Adjusting styles of `<lynk-button>` outline styles and making disabled slightly more obvious.
 - 🎉 NEW: Added a `<lynk-dot-loader>` component for another loader style.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@uplynk/lynk-design",
   "description": "A library of web components and styles for building web applications with the Edgio Streaming design language.",
-  "version": "0.9.12",
+  "version": "0.9.13",
   "homepage": "https://lynk.design/",
   "author": "Harley Jessop",
   "license": "MIT",

src/components/input/input.ts

@@ -103,7 +103,7 @@ export default class LynkInput extends LynkElement implements LynkFormControl {
   /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
   @defaultValue() defaultValue = '';
 
-  /** The input's validity state when using manual validation or set automatically to `error` or `success` when field uses Contraint Validation */
+  /** The input's validity state when using manual validation or set automatically to `error` or `success` when field uses Constraint Validation */
   @property({ reflect: true }) state: 'error' | 'warning' | 'success' | 'default' = 'default';
 
   /** The input's size. */
@@ -265,13 +265,16 @@ export default class LynkInput extends LynkElement implements LynkFormControl {
   }
 
   private handleClearClick(event: MouseEvent) {
-    this.value = '';
-    this.emit('on:clear');
-    this.emit('on:input');
-    this.emit('on:change');
-    this.input.focus();
+    event.preventDefault();
 
-    event.stopPropagation();
+    if (this.value !== '') {
+      this.value = '';
+      this.emit('on:clear');
+      this.emit('on:input');
+      this.emit('on:change');
+    }
+
+    this.input.focus();
   }
 
   private handleFocus() {
@@ -316,8 +319,9 @@ export default class LynkInput extends LynkElement implements LynkFormControl {
   }
 
   @watch('disabled', { waitUntilFirstUpdate: true })
-  handleDisabledChange() {
+  async handleDisabledChange() {
     // Disabled form controls are always valid
+    await this.updateComplete;
     this.formControlController.setValidity(this.disabled);
   }
 

src/components/radio-group/radio-group.ts

@@ -136,7 +136,7 @@ export default class LynkRadioGroup extends LynkElement implements LynkFormContr
     const radios = this.getAllRadios();
     const oldValue = this.value;
 
-    if (target.disabled) {
+    if (!target || target.disabled) {
       return;
     }