Vue.jsで作ったフォームをAndroid ChromeとiOS Safariでテストしていたら、Safariだけでテキストエリアの改行や空白が無効になる事象を発見。
どんなに検索しても類似の話題がヒットせず調査に時間がかかったのでまとめてみました。

何が起こったのか

こうやって入力したかったのに・・・

こうなった

※テキストエリアはVuetifyを使用

アルファベットは理想通りだが、文字を入力するそばから改行やスペースが消えていってしまった。
このほか、スペイン語や韓国語などの文字をランダムで試したところアルファベットと同様の挙動で、
中国語は日本語と同様だった。

なんで・・・？？

原因調査

１．前提の確認

普段はAndroidユーザーなので、念の為iOS Safariで前提を確認。

１．iOSのメモ帳で改行できること
２．HTMLのtextareaで改行できること
３．Vuetifyのv-textareaで改行できること

いずれも改行・空白が有効であることを確認。

２．改行が有効なコードと無効なコードを比較

改行が有効なコード（Vuetify公式サンプルより抜粋）

Vuetify.vue

<v-textarea label="Label" value="value"></v-textarea>

改行が無効なコード（自分のコードより抜粋）

MyCode.vue

<v-textarea label="Label" v-model.trim="value"></v-textarea>

→v-model.trim が怪しそう・・・

３．VuetifyのCodePenをSafariで操作

さっき正常に動いたVuetifyのvalueをv-model.trimに変えると・・・
改行できなくなった！！！
さらにv-modelだけにすると・・・
改行できた！！！

MyCode.vue

<!--これだと改行・スペースが無視される-->
<v-textarea label="Label" v-model.trim="value"></v-textarea>

<!--これだと改行・スペースが無視されない-->
<v-textarea label="Label" v-model="value"></v-textarea>

スペースについても、同様の挙動。

解決方法

v-model.trim="str"を使わずに、v-model="str"とstr.trim()を使う

おわりに

Safariでは.trimを使うと、日本語入力した際に改行やスペース入力が無効になる場合があるようです。
（英語だと発生しないので、どんなに英語で検索しても出てこないはず・・・）
本当は入力値全体の前後の空白だけ除去する機能のはずですが、なぜ入力中に即時で除去していくのでしょうか？
さらに詳しい原因は.trimの仕様やSafariのテキストエリアの挙動や２バイト文字について調べる必要がありそうですが、一旦覚書まで・・・。
ご存知の方がいらっしゃいましたら、ご教示いただけますと幸いです。