@jungherz-de/glasskit-elements 1.21.1 → 1.22.0

package/dist/components/glk-search.js

@@ -28,7 +28,9 @@ class GlkSearch extends GlkFormElement {
     const name = this.getAttribute('name');
     if (name) this._input.setAttribute('name', name);
 
-    const value = this.getAttribute('value');
+    // A value set as a property before render() has waited for it.
+    const value = this._pendingValue ?? this.getAttribute('value');
+    this._pendingValue = undefined;
     if (value) this._input.value = value;
 
     if (this.getBoolAttr('disabled')) this._input.disabled = true;
@@ -90,9 +92,13 @@ class GlkSearch extends GlkFormElement {
     this._syncFormValue();
   }
 
-  get value() { return this._input?.value ?? ''; }
+  get value() { return this._input ? this._input.value : (this._pendingValue ?? this.getAttribute('value') ?? ''); }
   set value(v) {
-    if (this._input) this._input.value = v;
+    const value = v == null ? '' : String(v);
+    // Frameworks set properties right after creating the element. Before
+    // render() the value waits for it — it used to throw.
+    if (!this._input) { this._pendingValue = value; return; }
+    this._input.value = value;
     this._syncFormValue();
   }
 }

package/dist/components/glk-select.js

@@ -1,6 +1,16 @@
 import { GlkFormElement } from './base.js';
 import '@jungherz-de/glasskit/glasskit-styles.js';
 
+// The wanted value. A select can show a value only once an option carries it,
+// and the options arrive late: they are copied in a frame after connecting,
+// and a framework may add them later still — while it sets `value` as a
+// property right after creating the element. So the value the attribute or
+// the property asks for is kept as wanted until an option carries it; a
+// choice of the user replaces it. Before 1.22.0 only the attribute was kept:
+// a property set before connecting threw, and one set before the options
+// were copied was lost — the select showed its first option while the app
+// held the other value.
+
 class GlkSelect extends GlkFormElement {
   static get observedAttributes() {
     return ['label', 'disabled', 'name', 'value', 'required'];
@@ -16,6 +26,8 @@ class GlkSelect extends GlkFormElement {
     this._labelEl.textContent = this.getAttribute('label') || '';
 
     this._select = this.createElement('select', ['glass-select'], { id: 'field' });
+    // A value set as a property before render() is wanted already.
+    if (this._wanted === undefined) this._wanted = this.getAttribute('value');
 
     const name = this.getAttribute('name');
     if (name) this._select.setAttribute('name', name);
@@ -47,10 +59,10 @@ class GlkSelect extends GlkFormElement {
 
     this._moveOptions();
 
-    // Keep the live selection when it survived the rebuild; otherwise fall back
-    // to the value attribute. Without this the selection jumps back to the first
-    // entry every time the list is updated.
-    if (!this._applyValue(previous)) this._applyValue(this.getAttribute('value'));
+    // The wanted value first, then the live selection if it survived the
+    // rebuild — without that, the selection would jump back to the first entry
+    // every time the list is updated.
+    if (!this._applyValue(this._wanted)) this._applyValue(previous);
     this._syncFormValue();
   }
 
@@ -76,6 +88,7 @@ class GlkSelect extends GlkFormElement {
 
   setupEvents() {
     this._onChange = () => {
+      this._wanted = null;            // the user's choice replaces it
       this._syncFormValue();
       this.emit('glk-change', { value: this._select.value });
       this.dispatchEvent(new Event('change', { bubbles: true }));
@@ -100,7 +113,8 @@ class GlkSelect extends GlkFormElement {
         this._select.setAttribute('name', this.getAttribute('name') || '');
         break;
       case 'value':
-        this._applyValue(this.getAttribute('value'));
+        this._wanted = this.getAttribute('value');
+        this._applyValue(this._wanted);
         this._syncFormValue();
         break;
       case 'required':
@@ -116,13 +130,22 @@ class GlkSelect extends GlkFormElement {
   }
 
   resetValue() {
-    this._select.selectedIndex = 0;
+    // Back to what the markup asked for, else the first option.
+    this._wanted = this.getAttribute('value');
+    if (!this._applyValue(this._wanted)) this._select.selectedIndex = 0;
     this._syncFormValue();
   }
 
-  get value() { return this._select?.value ?? ''; }
+  get value() {
+    // Until options are there, the wanted value is the answer: a framework
+    // reads back what it has just set.
+    if (!this._select?.options.length) return this._wanted ?? this.getAttribute('value') ?? '';
+    return this._select.value;
+  }
   set value(v) {
-    if (this._select) this._select.value = v;
+    this._wanted = v == null ? '' : String(v);
+    if (!this._select) return;        // render() takes it from here
+    this._applyValue(this._wanted);
     this._syncFormValue();
   }
 

package/dist/components/glk-textarea.js

@@ -3,7 +3,7 @@ import '@jungherz-de/glasskit/glasskit-styles.js';
 
 class GlkTextarea extends GlkFormElement {
   static get observedAttributes() {
-    return ['label', 'placeholder', 'rows', 'disabled', 'name', 'value', 'required'];
+    return ['label', 'placeholder', 'rows', 'disabled', 'readonly', 'name', 'value', 'required'];
   }
 
   render() {
@@ -23,10 +23,13 @@ class GlkTextarea extends GlkFormElement {
     const name = this.getAttribute('name');
     if (name) this._textarea.setAttribute('name', name);
 
-    const value = this.getAttribute('value');
+    // A value set as a property before render() has waited for it.
+    const value = this._pendingValue ?? this.getAttribute('value');
+    this._pendingValue = undefined;
     if (value) this._textarea.value = value;
 
     if (this.getBoolAttr('disabled')) this._textarea.disabled = true;
+    if (this.getBoolAttr('readonly')) this._textarea.readOnly = true;
     if (this.getBoolAttr('required')) this._textarea.required = true;
 
     group.appendChild(this._labelEl);
@@ -64,6 +67,9 @@ class GlkTextarea extends GlkFormElement {
       case 'disabled':
         this._textarea.disabled = this.getBoolAttr('disabled');
         break;
+      case 'readonly':
+        this._textarea.readOnly = this.getBoolAttr('readonly');
+        break;
       case 'name':
         this._textarea.setAttribute('name', this.getAttribute('name') || '');
         break;
@@ -88,14 +94,21 @@ class GlkTextarea extends GlkFormElement {
     this._syncFormValue();
   }
 
-  get value() { return this._textarea?.value ?? ''; }
+  get value() { return this._textarea ? this._textarea.value : (this._pendingValue ?? this.getAttribute('value') ?? ''); }
   set value(v) {
-    if (this._textarea) this._textarea.value = v;
+    const value = v == null ? '' : String(v);
+    // Frameworks set properties right after creating the element. Before
+    // render() the value waits for it — it used to throw.
+    if (!this._textarea) { this._pendingValue = value; return; }
+    this._textarea.value = value;
     this._syncFormValue();
   }
 
   get disabled() { return this.getBoolAttr('disabled'); }
   set disabled(v) { this.setBoolAttr('disabled', v); }
+
+  get readOnly() { return this.getBoolAttr('readonly'); }
+  set readOnly(v) { this.setBoolAttr('readonly', v); }
 }
 
 customElements.define('glk-textarea', GlkTextarea);

package/dist/components/glk-toggle.js

@@ -105,11 +105,12 @@ class GlkToggle extends GlkFormElement {
     }
   }
 
-  get checked() { return this._input?.checked ?? false; }
+  // Before render() the attribute carries the state: render() reads it.
+  get checked() { return this._input ? this._input.checked : this.getBoolAttr('checked'); }
   set checked(v) {
     if (this._input) this._input.checked = v;
     this.setBoolAttr('checked', v);
-    this._syncFormValue();
+    if (this._input) this._syncFormValue();
   }
 
   get disabled() { return this.getBoolAttr('disabled'); }