fix: distinction ux

app/src/react/components/chat/messages/submit/distinction/index.jsx

@@ -13,6 +13,7 @@ import useChannel from 'hooks/useChannel';
 export default function Distinction(props) {
   const {
     state: [distinction, setDistinction],
+    $textarea,
   } = props;
   const channel = useChannel();
   const isAnonymous = channelIsAnonymous(channel);
@@ -30,6 +31,9 @@ export default function Distinction(props) {
           onClick={() => {
             // eslint-disable-next-line no-bitwise
             setDistinction(distinction & ADMIN ? distinction & ~ADMIN : distinction | ADMIN);
+            if ($textarea.current) {
+              $textarea.current.focus();
+            }
           }}
         >
           <span>👑</span>
@@ -45,6 +49,9 @@ export default function Distinction(props) {
           onClick={() => {
             // eslint-disable-next-line no-bitwise
             setDistinction(distinction & MOD ? distinction & ~MOD : distinction | MOD);
+            if ($textarea.current) {
+              $textarea.current.focus();
+            }
           }}
         >
           <span>🎩</span>
@@ -59,4 +66,15 @@ Distinction.propTypes = {
     PropTypes.number,
     PropTypes.func,
   ])).isRequired,
+  $textarea: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({
+      current: (props, propName, componentName) => {
+        if (props[propName] !== null && !(props[propName] instanceof window.Node)) {
+          throw new Error(`Invalid current prop for $textarea on ${componentName}.`);
+        }
+        return undefined;
+      },
+    }),
+  ]).isRequired,
 };

app/src/react/components/chat/messages/submit/index.jsx

@@ -26,6 +26,7 @@ export default function ChatSubmitMessage() {
   const channel = useChannel();
   const dispatch = useDispatch();
   const $form = useRef(null);
+  const $textarea = useRef(null);
   const [distinction, setDistinction] = useState(0);
   const redditUsername = useSelector(redditUsernameSelector);
   const user = useSelector(userSelector);
@@ -81,6 +82,7 @@ export default function ChatSubmitMessage() {
         <textarea
           className="chat--messagesTextarea"
           name="message"
+          ref={$textarea}
           type="textarea"
           onChange={(event) => setText(event.target.value || '')}
           onKeyDown={(event) => {
@@ -99,7 +101,10 @@ export default function ChatSubmitMessage() {
           }}
           value={text || ''}
         />
-        <Distinction state={[distinction, setDistinction]} />
+        <Distinction
+          state={[distinction, setDistinction]}
+          $textarea={$textarea}
+        />
       </form>
     </div>
   );