Poll Modal: Fix explanation field centering (#3323)

src/components/middle/composer/PollModal.tsx

@@ -1,7 +1,7 @@
 import type { ChangeEvent, RefObject } from 'react';
 import type { FC } from '../../../lib/teact/teact';
 import React, {
-  memo, useEffect, useLayoutEffect, useRef, useState,
+  memo, useEffect, useRef, useState,
 } from '../../../lib/teact/teact';
 import { requestNextMutation } from '../../../lib/fasterdom/fasterdom';
 
@@ -18,6 +18,7 @@ import Modal from '../../ui/Modal';
 import InputText from '../../ui/InputText';
 import Checkbox from '../../ui/Checkbox';
 import RadioGroup from '../../ui/RadioGroup';
+import TextArea from '../../ui/TextArea';
 
 import './PollModal.scss';
 
@@ -42,8 +43,6 @@ const PollModal: FC<OwnProps> = ({
   const questionInputRef = useRef<HTMLInputElement>(null);
   // eslint-disable-next-line no-null/no-null
   const optionsListRef = useRef<HTMLDivElement>(null);
-  // eslint-disable-next-line no-null/no-null
-  const solutionRef = useRef<HTMLDivElement>(null);
 
   const [question, setQuestion] = useState<string>('');
   const [options, setOptions] = useState<string[]>(['']);
@@ -56,6 +55,10 @@ const PollModal: FC<OwnProps> = ({
 
   const lang = useLang();
 
+  const handleSolutionChange = useLastCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
+    setSolution(e.target.value);
+  });
+
   const focusInput = useLastCallback((ref: RefObject<HTMLInputElement>) => {
     if (isOpen && ref.current) {
       ref.current.focus();
@@ -78,14 +81,6 @@ const PollModal: FC<OwnProps> = ({
 
   useEffect(() => focusInput(questionInputRef), [focusInput, isOpen]);
 
-  useLayoutEffect(() => {
-    const solutionEl = solutionRef.current;
-
-    if (solutionEl && solution !== solutionEl.innerHTML) {
-      solutionEl.innerHTML = solution;
-    }
-  }, [solution]);
-
   const addNewOption = useLastCallback((newOptions: string[] = []) => {
     setOptions([...newOptions, '']);
 
@@ -349,12 +344,10 @@ const PollModal: FC<OwnProps> = ({
         {isQuizMode && (
           <>
             <h3 className="options-header">{lang('lng_polls_solution_title')}</h3>
-            <div
+            <TextArea
-              ref={solutionRef}
+              value={solution}
-              className="form-control"
+              onChange={handleSolutionChange}
-              contentEditable
+              noReplaceNewlines
-              dir="auto"
-              onChange={(e) => setSolution(e.currentTarget.innerHTML)}
             />
             <div className="note">{lang('CreatePoll.ExplanationInfo')}</div>
           </>