From 407ff39fdff2fc7594a902ffbb425494c74a3fc9 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Wed, 2 Aug 2023 12:55:25 +0200
Subject: [PATCH] FIX: Poll builder UI issues (#22931)

1. recent css regression related to modal upgrade
2. autofocus and on-enter regressions
3. array related linting issue (reliance on Ember's firstObject/lastObject)
---
 .../discourse/app/modifiers/auto-focus.js     |  2 +
 .../components/modal/poll-ui-builder.hbs      | 13 +++---
 .../components/modal/poll-ui-builder.js       | 45 +++++++++----------
 .../stylesheets/common/poll-ui-builder.scss   |  6 +--
 .../stylesheets/desktop/poll-ui-builder.scss  |  4 +-
 5 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/modifiers/auto-focus.js b/app/assets/javascripts/discourse/app/modifiers/auto-focus.js
index 78d43f65a93..e1e75fd721f 100644
--- a/app/assets/javascripts/discourse/app/modifiers/auto-focus.js
+++ b/app/assets/javascripts/discourse/app/modifiers/auto-focus.js
@@ -5,7 +5,9 @@ export default class AutoFocusModifier extends Modifier {
 
   modify(element) {
     if (!this.didFocus) {
+      element.autofocus = true;
       element.focus();
+
       this.didFocus = true;
     }
   }
diff --git a/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.hbs b/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.hbs
index 0955f70b3ff..f87cc57cb4b 100644
--- a/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.hbs
+++ b/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.hbs
@@ -61,11 +61,14 @@
             {{/unless}}
           {{/if}}
         {{else}}
-          {{#each this.pollOptions as |option|}}
+          {{#each this.pollOptions as |option index|}}
             <div class="input-group poll-option-value">
-              <Input
-                @value={{option.value}}
-                @enter={{action "addOption" option}}
+              <input
+                type="text"
+                value={{option.value}}
+                {{auto-focus}}
+                {{on "input" (fn this.updateValue option)}}
+                {{on "keydown" (fn this.onInputKeydown index)}}
               />
               {{#if this.canRemoveOption}}
                 <DButton
@@ -81,7 +84,7 @@
               class="btn-default poll-option-add"
               @icon="plus"
               @label="poll.ui_builder.poll_options.add"
-              @action={{action "addOption" this.pollOptions.lastObject}}
+              @action={{fn this.addOption -1}}
             />
             {{#if
               (and
diff --git a/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.js b/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.js
index f05f3f5ece9..56aab54fe6f 100644
--- a/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.js
+++ b/plugins/poll/assets/javascripts/discourse/components/modal/poll-ui-builder.js
@@ -1,7 +1,6 @@
 import { gt, or } from "@ember/object/computed";
 import Component from "@ember/component";
 import EmberObject, { action } from "@ember/object";
-import { next } from "@ember/runloop";
 import discourseComputed from "discourse-common/utils/decorators";
 import { observes } from "@ember-decorators/object";
 import I18n from "I18n";
@@ -322,12 +321,9 @@ export default class PollUiBuilderModal extends Component {
 
   @action
   onOptionsTextChange(e) {
-    let idx = 0;
     this.set(
       "pollOptions",
-      e.target.value
-        .split("\n")
-        .map((value) => EmberObject.create({ idx: idx++, value }))
+      e.target.value.split("\n").map((value) => EmberObject.create({ value }))
     );
   }
 
@@ -349,29 +345,30 @@ export default class PollUiBuilderModal extends Component {
   }
 
   @action
-  addOption(beforeOption, value, e) {
-    if (value !== "") {
-      const idx = this.pollOptions.indexOf(beforeOption) + 1;
-      const option = EmberObject.create({ value: "" });
-      this.pollOptions.insertAt(idx, option);
+  updateValue(option, event) {
+    option.set("value", event.target.value);
+  }
 
-      let lastOptionIdx = 0;
-      this.pollOptions.forEach((o) => o.set("idx", lastOptionIdx++));
+  @action
+  onInputKeydown(index, event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
 
-      next(() => {
-        const pollOptions = document.getElementsByClassName("poll-options");
-        if (pollOptions) {
-          const inputs = pollOptions[0].getElementsByTagName("input");
-          if (option.idx < inputs.length) {
-            inputs[option.idx].focus();
-          }
-        }
-      });
+      if (event.target.value !== "") {
+        this.addOption(index + 1);
+      }
+    }
+  }
+
+  @action
+  addOption(atIndex) {
+    if (atIndex === -1) {
+      atIndex = this.pollOptions.length;
     }
 
-    if (e) {
-      e.preventDefault();
-    }
+    const option = EmberObject.create({ value: "" });
+    this.pollOptions.insertAt(atIndex, option);
   }
 
   @action
diff --git a/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss b/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
index 5f71f1dea55..09bf315fd6a 100644
--- a/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
+++ b/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
@@ -67,13 +67,13 @@
     margin-bottom: 15px;
 
     .poll-option-value {
-      align-items: center;
+      align-items: flex-start;
       display: flex;
       justify-content: space-between;
-      margin-bottom: 3px;
+      margin-bottom: 0;
 
       button {
-        margin-left: 3px;
+        margin-left: 0.5rem;
       }
     }
 
diff --git a/plugins/poll/assets/stylesheets/desktop/poll-ui-builder.scss b/plugins/poll/assets/stylesheets/desktop/poll-ui-builder.scss
index 1bfac2e1792..cbc79369bbf 100644
--- a/plugins/poll/assets/stylesheets/desktop/poll-ui-builder.scss
+++ b/plugins/poll/assets/stylesheets/desktop/poll-ui-builder.scss
@@ -1,7 +1,7 @@
-.poll-ui-builder-modal {
+.poll-ui-builder.modal {
   .modal-inner-container {
     width: 40em; // scale with user font-size
-    max-width: 100vw; // prevent overflow if user font-size is enourmous
+    max-width: 100vw; // prevent overflow if user font-size is enormous
   }
 
   .modal-body {