#2412 <Enter> key issue on mobile
#2413
Conversation
group-income
|
||||||||||||||||||||||||||||
| Project |
group-income
|
| Branch Review |
sebin/task/#2412-enter-key-issue-on-mobile
|
| Run status |
|
| Run duration | 08m 53s |
| Commit |
|
| Committer | Sebin Song |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
10
|
Skipped
|
0
|
Passing
|
111
|
| View all changes introduced in this branch ↗︎ | |
|
LGTM. I'm not so happy about the mobile detection, but then I can't really find a better way of doing this. What I'd do is maybe add a setting or a UI component (like a checkbox or dropdown) to explicitly select the Enter behaviour (tri-state: 'auto', ⇧ Shift+Enter for new line, Enter for new line) but that may be beyond the scope of this issue. |
There was a problem hiding this comment.
Nice work @SebinSong!
I found one minor concern re Vue.js behavior (see comment), and a bug on mobile: try typing some text, and then pressing Enter many times on mobile. What will happen is that the text field will get taller up to a point, and the original text you typed will get moved way up. However, you won't be able to scroll the text field to edit the original text you type. On Android at least, whenever I tried to scroll the textfield, it would instead scroll the background chat.
| const mediaIsPhone = window.matchMedia('(hover: none) and (pointer: coarse)') | ||
| this.ephemeral.isPhone = mediaIsPhone.matches | ||
| mediaIsPhone.onchange = (e) => { this.ephemeral.isPhone = e.matches } | ||
| this.mediaIsPhone = window.matchMedia('(hover: none) and (pointer: coarse)') |
There was a problem hiding this comment.
This seems to be creating a variable on the Vue object on-the-fly, which, as far as I know, isn't recommended by Vue.js. So correct me if I'm wrong, but I think this mediaIsPhone should be defined in the object returned by the data() section.
…ter-key-issue-on-mobile
I've been trying to figure this out for a while thinking it's a bug too, but it appears that this is a default behaviour by the browsers on mobile. Also, this only happens when the keyboard panel is revealed. When you click outside the For example, you can confirm this symptom happens in any But we can still use below handle that is attached to the cursor to move up/down which allows us to push the text content back down to a position you want. I guess this is how we are supposed to scroll the text content on textarea while the keyboard panel is up on mobile. 
Thanks, |
closes #2412
I can write multi-line messages from mobile now.