From 140e6e19c14deb4c7ff05465485c7770cfeed3bc Mon Sep 17 00:00:00 2001
From: btopro <btopro@outlook.com>
Date: Wed, 22 May 2024 12:35:43 -0400
Subject: [PATCH] https://github.com/elmsln/issues/issues/2002
 https://github.com/elmsln/issues/issues/2001

---
 elements/fill-in-the-blanks/fill-in-the-blanks.js  |  9 ++++++---
 .../fill-in-the-blanks/src/fill-in-the-blanks.js   |  9 ++++++---
 elements/multiple-choice/lib/QuestionElement.js    | 13 +++++++++++--
 elements/simple-fields/lib/simple-fields-field.js  | 14 ++++++++++++++
 4 files changed, 37 insertions(+), 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
index 37c2b05092..8bb52cd038 100644
--- 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
index 37c2b05092..8bb52cd038 100644
--- 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
index 5d51a30118..c7b1400451 100644
--- 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
index 9b9e928ade..fcc7952dc6 100644
--- 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}"