search

cables-gl / cables_docs

cables documentation docs.cables.gl
https://cables.gl/docs/docs
33 stars 14 forks source link

InputElement focus / blur issues #750

Open 60-hz opened 1 month ago

60-hz commented 1 month ago

On some iOS systems, InputElement op is constantly loosing focus when the apple keyboard appear. The result is user cannot enter any key... thanks apple.

A hack would be to trigger blur and focus at everykeypress keypress... But as results the cursor is reset to begining of the input field and characters are added before the text!

Capture d’écran 2024-05-07 à 14 48 10

Would be happy to know if another text input is possible...

Samer problem occurs with SideBar Input Same problem occus with Safari and Chrome

Problem occurs with many iOS systems... like 15.7.9 Problem doesn't occur with iOS 17.4.1

steam0r commented 1 month ago

does setting -webkit-user-select: none; via css still help?

60-hz commented 1 month ago

Thanks, added to InputElement's css but still the same behaviour, the text cannot be typed in the box...

60-hz commented 1 month ago

I made some tests...

The input field works when I use this link on cables.gl: https://cables.gl/p/SHnF4c

The input don't work (on some iOS) when I publish it on my github... https://60-hz.github.io/Test-Input/

Very tricky... could this be related to the iframe in cables.gl ?

steam0r commented 1 month ago

the input element in your export has these additional styles:

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

which are from the index.html of the export...they actually are there to prevent this behaviout (as mentioned above), but maybe try removing them?