I have already got the expected behaviour. But not at all times. Sometimes the focused component is hidden behind the on-screen keyboard. I have fixed it by using scrollIntoView and setTimeout. This will help if the focused component is not scrolled up automatically.
My Solution:
class KeyboardAwayView extends Component {
constructor(props) {
super(props);
this.dummyRef = React.createRef();
}
render() {
const Children = this.props.children;
// Scroll to children component on focus
const ClonedChildren = React.cloneElement(Children, {
onFocus: () => {
this.dummyRef.current.scrollIntoView({ behavior: 'smooth' });
setTimeout(() => {
if (this.dummyRef.current) {
this.dummyRef.current.scrollIntoView({ behavior: 'smooth' });
}
}, (this.props.interval | 500));
}
});
return (
<div className="keyboard-away-container">
{ClonedChildren}
<div className="dummy" ref={this.dummyRef}></div>
</div>
);
}
}
Questions:
Is there anything to do to improve my solution?
Is there any standard way to solve this. In React Native there is a KeyboardAvoidingView. Is there anything like that in ReactJS?
I have already gone through this Is there any javascript event fired when the on-screen keyboard on mobile safari or chrome opens?.
