@rogieking/figui3 1.0.84 → 1.0.86

package/example.html

@@ -19,7 +19,13 @@
     <h2>Heading 2</h2>
     <h3>Heading 3</h3>
     <br />
-
+    <fig-dropdown>
+        <option>One</option>
+        <option>Two</option>
+        <option>Three</option>
+        <option selected>Four</option>
+    </fig-dropdown>
+    <br />
     <fig-slider min="0"
                 max="1"
                 transform="100"

package/fig.js

@@ -102,7 +102,6 @@ if (window.customElements && !window.customElements.get("fig-dropdown")) {
 
     connectedCallback() {
       this.type = this.getAttribute("type") || "select";
-      this.value = this.getAttribute("value") || "";
 
       this.appendChild(this.select);
       this.shadowRoot.appendChild(this.optionsSlot);
@@ -112,13 +111,10 @@ if (window.customElements && !window.customElements.get("fig-dropdown")) {
         this.slotChange.bind(this)
       );
 
-      this.select.addEventListener(
-        "input",
-        this.handleDropdownInput.bind(this)
-      );
+      this.select.addEventListener("input", this.#handleSelectInput.bind(this));
       this.select.addEventListener(
         "change",
-        this.handleDropdownChange.bind(this)
+        this.#handleSelectChange.bind(this)
       );
     }
 
@@ -134,9 +130,6 @@ if (window.customElements && !window.customElements.get("fig-dropdown")) {
       }
       this.optionsSlot.assignedNodes().forEach((option) => {
         if (option.nodeName === "OPTION" || option.nodeName === "OPTGROUP") {
-          if (option.hasAttribute("value") && option.hasAttribute("selected")) {
-            this.value = option.getAttribute("value");
-          }
           this.select.appendChild(option.cloneNode(true));
         }
       });
@@ -145,11 +138,12 @@ if (window.customElements && !window.customElements.get("fig-dropdown")) {
       }
     }
 
-    handleDropdownInput() {
-      this.value = this.select.value;
+    #handleSelectInput(e) {
+      console.log("FigDropdown #handleSelectInput:", e.target.value);
+      this.value = e.target.value;
       this.setAttribute("value", this.value);
     }
-    handleDropdownChange() {
+    #handleSelectChange() {
       if (this.type === "dropdown") {
         this.select.selectedIndex = -1;
       }
@@ -165,6 +159,8 @@ if (window.customElements && !window.customElements.get("fig-dropdown")) {
     }
     set value(value) {
       this.setAttribute("value", value);
+      this.select.value = value;
+      this.select.setAttribute("value", value);
     }
     static get observedAttributes() {
       return ["value", "type"];
@@ -172,6 +168,7 @@ if (window.customElements && !window.customElements.get("fig-dropdown")) {
     attributeChangedCallback(name, oldValue, newValue) {
       if (name === "value") {
         this.select.value = newValue;
+        this.select.setAttribute("value", newValue);
       }
       if (name === "type") {
         this.type = newValue;

package/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@rogieking/figui3",
-  "version": "1.0.84"
+  "version": "1.0.86"
 }