Если поместить текстовый ввод в оверлей портала React и прокрутить содержимое рядом с ним, любое событие, изменяющее состояние, заставляет Safari прокручивать портал (который находится внизу страницы).
Для воссоздания
- Портал должен быть добавлен как элемент брата к корню (и дочерний элемент к телу)
- Ввод текста должен быть размещен внутри портала
setState должен называться setState не должен влиять на значение ввода текста - Содержимое в корне должно быть достаточно длинным для прокрутки страницы
происходит только в Safari (в настоящее время используется 11.1.2)
import * as React из 'реакции';
import {createPortal} из'act-dom ';
экспорт класс по умолчанию App extends React.Component {
const {portalActive, randomBoolean} = this.state;
togglePortal = () => {
this.setState (({portalActive}) => {
return {portalActive:! portalActive};
});
}; * * Тысяча двадцать-семь
toggleBoolean = () => {
this.setState (({randomBoolean}) => {
return {randomBoolean:! randomBoolean};
});
}; * 1 029 *
render () {
const textInput =;
const portal = this.state.portalActive
? ({ввод текста})
: ноль;
return (
<>
<button onClick={this.togglePortal}
{portal}
{Array.from({length: 40}).map(() => (
<p>Content that causes scrolling</p>
))}
</>
);
}
}
класс Portal расширяет React.Component {
const {children, idPrefix} = this.props;
componentWillMount () {
const portalNode = document.createElement ('div');
document.body.appendChild (portalNode);
}
componentWillUnmount () {
document.body.removeChild (portalNode);
}
render () {
return createPortal (children, portalNode);
}
}
