Poll: Fix impossible to mark the 10th quiz option as correct (#4106)

src/components/middle/composer/PollModal.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/mixins';
+
 .PollModal {
   .modal-dialog {
     max-width: 26.25rem;
@@ -26,19 +28,13 @@
     border-top: 1px solid var(--color-chat-hover);
     max-height: 20rem;
     overflow: auto;
+    overflow-y: scroll;
 
-    &.overflown {
+    @include mixins.adapt-padding-to-scrollbar(0.75rem);
-      padding: 0 0.4375rem 0.5rem 0.75rem;
-    }
 
     @media (max-width: 600px) {
       overflow: hidden;
       max-height: none;
-
-      &,
-      &.overflown {
-        padding: 0 0.75rem;
-      }
     }
   }
 

src/components/middle/composer/PollModal.tsx

@@ -6,7 +6,7 @@ import React, {
 
 import type { ApiNewPoll } from '../../../api/types';
 
-import { requestNextMutation } from '../../../lib/fasterdom/fasterdom';
+import { requestMeasure, requestNextMutation } from '../../../lib/fasterdom/fasterdom';
 import captureEscKeyListener from '../../../util/captureEscKeyListener';
 import parseHtmlAsFormattedText from '../../../util/parseHtmlAsFormattedText';
 
@@ -90,8 +90,9 @@ const PollModal: FC<OwnProps> = ({
         return;
       }
 
-      list.classList.toggle('overflown', list.scrollHeight > MAX_LIST_HEIGHT);
+      requestMeasure(() => {
-      list.scrollTo({ top: list.scrollHeight, behavior: 'smooth' });
+        list.scrollTo({ top: list.scrollHeight, behavior: 'smooth' });
+      });
     });
   });
 
@@ -101,12 +102,26 @@ const PollModal: FC<OwnProps> = ({
       return;
     }
 
-    const questionTrimmed = question.trim().substring(0, MAX_QUESTION_LENGTH);
+    const isNoCorrectOptionError = isQuizMode && (correctOption === undefined || !options[correctOption].trim());
-    const optionsTrimmed = options.map((o) => o.trim().substring(0, MAX_OPTION_LENGTH)).filter((o) => o.length);
 
-    if (!questionTrimmed || optionsTrimmed.length < 2) {
+    const answers = options
+      .map((text, index) => {
+        text = text.trim();
+
+        if (!text) return undefined;
+
+        return {
+          text,
+          option: String(index),
+          ...(index === correctOption && { correct: true }),
+        };
+      }).filter(Boolean);
+
+    const questionTrimmed = question.trim().substring(0, MAX_QUESTION_LENGTH);
+    if (!questionTrimmed || answers.length < 2) {
       setQuestion(questionTrimmed);
-      if (optionsTrimmed.length) {
+      if (answers.length) {
+        const optionsTrimmed = options.map((o) => o.trim().substring(0, MAX_OPTION_LENGTH)).filter(Boolean);
         if (optionsTrimmed.length < 2) {
           addNewOption(optionsTrimmed);
         } else {
@@ -119,18 +134,11 @@ const PollModal: FC<OwnProps> = ({
       return;
     }
 
-    if (isQuizMode && (correctOption === undefined || !optionsTrimmed[correctOption])) {
+    if (isNoCorrectOptionError) {
       setHasErrors(true);
       return;
     }
 
-    const answers = optionsTrimmed
-      .map((text, index) => ({
-        text: text.trim(),
-        option: String(index),
-        ...(index === correctOption && { correct: true }),
-      }));
-
     const payload: ApiNewPoll = {
       summary: {
         question: questionTrimmed,
@@ -280,7 +288,7 @@ const PollModal: FC<OwnProps> = ({
 
   function renderRadioOptions() {
     return renderOptions()
-      .map((label, index) => ({ value: String(index), label, hidden: index === options.length - 1 }));
+      .map((label, index) => ({ value: String(index), label, hidden: !options[index].trim() }));
   }
 
   function renderQuizNoOptionError() {