search

cables-gl / cables_docs

cables documentation docs.cables.gl
https://cables.gl/docs/docs
45 stars 16 forks source link

InputElement focus / blur issues #750

Open 60-hz opened 6 months ago

60-hz commented 6 months 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 6 months ago

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

60-hz commented 6 months ago

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

60-hz commented 6 months 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 6 months 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?