haxtheweb/issues#2002 haxtheweb/issues#2001

haxtheweb · May 22, 2024 · 140e6e1 · 140e6e1
1 parent 22b8fd5
commit 140e6e1
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 8 deletions.
diff --git a/elements/fill-in-the-blanks/fill-in-the-blanks.js b/elements/fill-in-the-blanks/fill-in-the-blanks.js
@@ -24,11 +24,14 @@ class FillInTheBlanks extends MarkTheWords {
     
     simple-fields-field {
       display: inline-block;
-      width: 120px;
       margin-bottom: 0;
       vertical-align: middle;
+    }
+    simple-fields-field[type="textfield"] {
+      width: 140px;
       padding: var(--ddd-spacing-1) var(--ddd-spacing-2);
-    }`];
+    }
+    `];
   }
 
   /**
@@ -66,7 +69,7 @@ class FillInTheBlanks extends MarkTheWords {
     }
     else {
       return html`
-      <simple-fields-field type="text"></simple-fields-field>`;
+      <simple-fields-field type="textfield"></simple-fields-field>`;
 
     }
   }

diff --git a/elements/fill-in-the-blanks/src/fill-in-the-blanks.js b/elements/fill-in-the-blanks/src/fill-in-the-blanks.js
@@ -24,11 +24,14 @@ class FillInTheBlanks extends MarkTheWords {
     
     simple-fields-field {
       display: inline-block;
-      width: 120px;
       margin-bottom: 0;
       vertical-align: middle;
+    }
+    simple-fields-field[type="textfield"] {
+      width: 140px;
       padding: var(--ddd-spacing-1) var(--ddd-spacing-2);
-    }`];
+    }
+    `];
   }
 
   /**
@@ -66,7 +69,7 @@ class FillInTheBlanks extends MarkTheWords {
     }
     else {
       return html`
-      <simple-fields-field type="text"></simple-fields-field>`;
+      <simple-fields-field type="textfield"></simple-fields-field>`;
 
     }
   }

diff --git a/elements/multiple-choice/lib/QuestionElement.js b/elements/multiple-choice/lib/QuestionElement.js
@@ -444,8 +444,6 @@ export class QuestionElement extends SchemaBehaviors(I18NMixin(DDDSuper(LitEleme
           margin-right: var(--ddd-spacing-4);
         }
         simple-fields-field {
-          padding: var(--ddd-spacing-4);
-          min-height: var(--ddd-spacing-8);
           transition: all 0.3s ease-in-out;
           border-radius: var(--ddd-radius-xs);
           margin-bottom: var(--ddd-spacing-6);
@@ -458,6 +456,17 @@ export class QuestionElement extends SchemaBehaviors(I18NMixin(DDDSuper(LitEleme
           --simple-icon-height: var(--ddd-icon-xs);
           --simple-icon-width: var(--ddd-icon-xs);
         }
+        simple-fields-field[type="textfield"] {
+          padding: var(--ddd-spacing-4);        
+          min-height: var(--ddd-spacing-8);
+        }
+        simple-fields-field::part(select) {
+          padding-top: var(--ddd-spacing-1);
+          padding-bottom: var(--ddd-spacing-1);
+          padding-left: var(--ddd-spacing-1);
+          min-height: var(--ddd-spacing-8);
+          line-height: 1.1;
+        }
         simple-toolbar-button {
           font-size: var(--ddd-font-size-xs);
           font-family: var(--ddd-font-navigation);

diff --git a/elements/simple-fields/lib/simple-fields-field.js b/elements/simple-fields/lib/simple-fields-field.js
@@ -114,9 +114,14 @@ const SimpleFieldsFieldBehaviors = function (SuperClass) {
             -webkit-appearance: none;
             -moz-appearance: none;
             appearance: none;
+            cursor: pointer;
+          }
+          :host([type="select"]) {
+            cursor: pointer;
           }
           :host([type="select"]) simple-icon-lite {
             position: absolute;
+            pointer-events: none;
             right: 0px;
           }
           select:focus,
@@ -505,6 +510,14 @@ const SimpleFieldsFieldBehaviors = function (SuperClass) {
         this.addEventListener("focusout", this._hoverStateOff.bind(this));
         this.addEventListener("mouseout", this._hoverStateOff.bind(this));
       }
+      // normalize select to focus the select field so we don't miss edges w/ padding
+      if (this.type === "select") {
+        this.addEventListener("click", this._focusSelect.bind(this));
+      }
+    }
+    _focusSelect(e) {
+      console.log(this.shadowRoot.querySelector('select'));
+      this.shadowRoot.querySelector('select').focus();
     }
     _selectionShortCut(e) {
       let checked = true
@@ -740,6 +753,7 @@ const SimpleFieldsFieldBehaviors = function (SuperClass) {
               : "box-input"}"
             ?disabled="${this.disabled}"
             @focus="${this._onFocusin}"
+            @click="${this._onFocusin}"
             ?hidden="${this.hidden}"
             id="${this.id}.${!option ? "" : option.value}"
             @input="${this._handleFieldChange}"