Composer: Fix auto-capitalize feature on iOS (#1227)

src/components/auth/Auth.tsx

@@ -5,6 +5,7 @@ import { GlobalActions, GlobalState } from '../../global/types';
 
 import '../../modules/actions/initial';
 import { pick } from '../../util/iteratees';
+import { PLATFORM_ENV } from '../../util/environment';
 
 import UiLoader from '../common/UiLoader';
 import AuthPhoneNumber from './AuthPhoneNumber';
@@ -14,7 +15,6 @@ import AuthRegister from './AuthRegister.async';
 import AuthQrCode from './AuthQrCode';
 
 import './Auth.scss';
-import { PLATFORM_ENV } from '../../util/environment';
 
 type StateProps = Pick<GlobalState, 'authState'>;
 type DispatchProps = Pick<GlobalActions, 'reset' | 'initApi'>;

src/components/middle/composer/MessageInput.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent } from 'react';
 import React, {
-  FC, useEffect, useRef, memo, useState, useCallback,
+  FC, useEffect, useRef, memo, useState, useCallback, useLayoutEffect,
 } from '../../../lib/teact/teact';
 import { withGlobal } from '../../../lib/teact/teactn';
 
@@ -22,6 +22,7 @@ import useFlag from '../../../hooks/useFlag';
 import parseEmojiOnlyString from '../../common/helpers/parseEmojiOnlyString';
 import { isSelectionInsideInput } from './helpers/selection';
 import useLang from '../../../hooks/useLang';
+import applyIosAutoCapitalizationFix from './helpers/applyIosAutoCapitalizationFix';
 
 import TextFormatter from './TextFormatter';
 
@@ -104,6 +105,12 @@ const MessageInput: FC<OwnProps & StateProps & DispatchProps> = ({
     updateInputHeight(false);
   }, []);
 
+  useLayoutEffect(() => {
+    if (IS_IOS && !html && inputRef.current === document.activeElement) {
+      applyIosAutoCapitalizationFix(inputRef.current!);
+    }
+  }, [html]);
+
   useLayoutEffectWithPrevDeps(([prevHtml]) => {
     if (html !== inputRef.current!.innerHTML) {
       inputRef.current!.innerHTML = html;

src/components/middle/composer/helpers/applyIosAutoCapitalizationFix.ts

@@ -0,0 +1,15 @@
+import { IS_IOS } from '../../../../util/environment';
+
+let resetInput: HTMLInputElement;
+
+if (IS_IOS) {
+  resetInput = document.createElement('input');
+  resetInput.classList.add('for-ios-autocapitalization-fix');
+  document.body.appendChild(resetInput);
+}
+
+// https://stackoverflow.com/a/55652503
+export default function applyIosAutoCapitalizationFix(inputEl: HTMLElement) {
+  resetInput.focus();
+  inputEl.focus();
+}

src/styles/index.scss

@@ -189,6 +189,14 @@ div[role="button"] {
   color: var(--color-text-secondary) !important;
 }
 
+.for-ios-autocapitalization-fix {
+  position: fixed;
+  font-size: 16px;
+  opacity: 0;
+  bottom: 1rem;
+  z-index: -1;
+}
+
 @keyframes grow-icon {
   0% {
     transform: scale(0.5);