humdrum00001010
How can I prevent keyboard to be dismissed
I am currently working on my toy project, implementing chat web-app.
It is almost made except keyboard issue that it is dismissed when I send a message (currently it is using form, generated by phx.gen.live).
I tried phx-hook to re-focus on input field just after the form submit(when updated) but it didn’t work in some mobile browsers, and even in success cases, keyboard got once dismissed and reactivated. It is so annoying in chatting experience.
Ideally, the keyboard and focus on input field should be conserved whether or not sending chat (form). How can I manage to do that?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #hex
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Bringing learning, work and compliance together since 1987.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
First 2 of 2 Posts
sodapopcan
Hello and welcome!
This is more a JavaScript question than a LiveView one (which is fine!). I think you can find what you’re looking for here (though I’ve never done this myself). TL;DR set
virtualkeyboardpolicy="manual"on the appropriate node and use theVirtualKeyboardclass’show()andhide()methods. I’m sure in some cases, though, you’re at the mercy of the platform you’re running the browser on.humdrum00001010
Sorry for late reply.
I changed the button’s type to “button” to prevent submit of form and added some code to handle it.
Now the keyboard works fine!
(The virtualkeyboard attr didn’t work on my iOS device..)