diff --git a/src/components/auth/Auth.tsx b/src/components/auth/Auth.tsx index dd7253c56..0597b228b 100644 --- a/src/components/auth/Auth.tsx +++ b/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; type DispatchProps = Pick; diff --git a/src/components/middle/composer/MessageInput.tsx b/src/components/middle/composer/MessageInput.tsx index 89deecc1a..0f02a1b0f 100644 --- a/src/components/middle/composer/MessageInput.tsx +++ b/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 = ({ 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; diff --git a/src/components/middle/composer/helpers/applyIosAutoCapitalizationFix.ts b/src/components/middle/composer/helpers/applyIosAutoCapitalizationFix.ts new file mode 100644 index 000000000..3a0f9c894 --- /dev/null +++ b/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(); +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 4f0a1872e..857f9ac90 100644 --- a/src/styles/index.scss +++ b/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);