UX: Uniform focus styles for composer inputs/textarea (#10296)

Uses a thin border as indicator that element is in focus for all editable items in the composer (inputs, select kit, textarea).

 Disables a default iOS style that has a blinking background color on inputs/textareas

app/assets/javascripts/discourse/app/components/d-editor.js

@@ -231,6 +231,7 @@ export default Component.extend({
   showLink: true,
   emojiPickerIsActive: false,
   emojiStore: service("emoji-store"),
+  isEditorFocused: false,
 
   @discourseComputed("placeholder")
   placeholderTranslated(placeholder) {
@@ -456,7 +457,6 @@ export default Component.extend({
         } else {
           $editorInput.autocomplete({ cancel: true });
           this.setProperties({
-            isEditorFocused: $("textarea.d-editor-input").is(":focus"),
             emojiPickerIsActive: true
           });
 
@@ -944,7 +944,6 @@ export default Component.extend({
         return;
       }
 
-      this.set("isEditorFocused", $("textarea.d-editor-input").is(":focus"));
       this.set("emojiPickerIsActive", !this.emojiPickerIsActive);
     },
 
@@ -1055,6 +1054,14 @@ export default Component.extend({
           );
         }
       }
+    },
+
+    focusIn() {
+      this.set("isEditorFocused", true);
+    },
+
+    focusOut() {
+      this.set("isEditorFocused", false);
     }
   }
 });

app/assets/javascripts/discourse/app/templates/components/d-editor.hbs

@@ -1,5 +1,5 @@
 <div class="d-editor-container">
-  <div class="d-editor-textarea-wrapper {{if disabled "disabled"}}">
+  <div class="d-editor-textarea-wrapper {{if disabled "disabled"}} {{if isEditorFocused "in-focus"}}">
     <div class="d-editor-button-bar">
       {{#each toolbar.groups as |group|}}
         {{#each group.buttons as |b|}}
@@ -41,7 +41,9 @@
       placeholder=placeholderTranslated
       aria-label=placeholderTranslated
       disabled=disabled
-      input=change}}
+      input=change
+      focusIn=(action "focusIn")
+      focusOut=(action "focusOut")}}
     {{popup-input-tip validation=validation}}
     {{plugin-outlet name="after-d-editor" tagName="" args=outletArgs}}
   </div>

app/assets/stylesheets/common/base/compose.scss

@@ -256,6 +256,9 @@
   #reply-title {
     margin: 0 0 5px 0;
     flex-basis: 50%;
+    &:focus {
+      box-shadow: none;
+    }
   }
 
   .mini-tag-chooser {

app/assets/stylesheets/common/d-editor.scss

@@ -26,6 +26,10 @@
     background: transparent;
   }
 
+  &.in-focus {
+    border-color: $tertiary;
+  }
+
   &.disabled {
     cursor: not-allowed;
     .d-editor-button-bar {

app/assets/stylesheets/common/select-kit/single-select.scss

@@ -11,7 +11,7 @@
 
   &.is-expanded {
     .select-kit-header {
-      outline: 1px solid $tertiary;
+      border: 1px solid $tertiary;
     }
   }
 }

app/assets/stylesheets/mobile/discourse.scss

@@ -13,6 +13,7 @@ body {
   textarea {
     background-color: $secondary;
     font-size: $font-size-ios-input;
+    -webkit-tap-highlight-color: transparent;
   }
 
   input {
@@ -33,6 +34,10 @@ body {
       font-size: $font-size-ios-input;
     }
   }
+
+  input#reply-title {
+    -webkit-tap-highlight-color: transparent;
+  }
 }
 
 blockquote {