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|}}
-
{{#if this.canRemoveOption}}
{{#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 {