Working with Framework7 and Cordova has been great overall. However, I have encountered an issue specifically on IOS devices (both simulator and real device) where I am unable to enter text completely into a textarea.
Whenever I try to input text using the keyboard, only the first character of the entered text appears in the textarea.
Oddly enough, if I hide the keyboard and then show it again, the first character of the previously entered text is prepended to the new text. But once again, only the first character shows up in the textarea.
Below is the markup for the page containing the textarea:
<template>
<div class="page" data-name="feedback" style="background-color:white;" >
<div class="navbar">
<div class="navbar-inner" id="fb-navbar-inner">
<div class="left">
<a href="#" class="link back">
<i class="material-icons md-only md-24 md-light">arrow_back</i>
<i class="f7-icons ios-menu-color ios-only">chevron_left</i>
<span class="ios-only" style="color: white">{{words.back}}</span>
</a>
</div>
<div class="title ios-menu-color">{{words.title}}</div>
</div>
</div>
<div class="ios-only preloader color-blue" id="fb-preloader-ios" style="visibility: hidden; display: none"></div>
<div class="md-only preloader color-blue" id="fb-preloader-md" style="visibility: hidden; display: none"></div>
<div class = "page-content" style="overflow-x: hidden">
<div align="center"><i class="icon make-feedback"></i></div>
<div align="center" id="hello" class="ios-menu-color-purple size-20 centered-text" style="margin: -20px 4% 0px 4%">{{words.hello}}</div>
<div class="list" style="margin: 3% 4% 3% 4%">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap md-only input-purple-theme" id="fb-input-wrap">
<textarea id="feedbackText"></textarea>
</div>
<div class="item-input-wrap ios-only">
<textarea id="feedbackText"></textarea>
</div>
</div>
</li>
</ul>
</div>
<div align="center" class="color-gray size-16" style="margin: 0% 4% 0% 4%">{{words.notify}}</div>
<a class="button button-fill purple-theme" style="width: 40%; margin: 8% 30% 0% 30%" id="sendFB">{{words.send}}</a>
</div>
</div></template>
Has anyone else faced a similar challenge before?