I am facing an issue that in react input element while the focus is on input element a default keyboard pops up after some seconds it automatically moves down. If i want it again even if i click the same input it is not working (I mean i'm not getting keybaord for same input again)
I have tried updating firmware
also tried focusing again with window.self.focus() and refereing to that element and focus both doesn't work whereas in zee tv application it is working fine
Related
I'm using React, and have a material UI Card that toggles on and off when clicked. I am trying to 1) get the card to toggle on/off correctly if the user long-presses it, and 2) disable the card toggling if the user presses it and slides(drags) away, then releases. Performing these actions with a mouse has all the desired effects, and there are no problems. However, my app is used on a touch-screen monitor (without a mouse) and so I must replicate the same outcomes with touching the screen.
Initially, I was using the onClick event handler to toggle the card. Long pressing with your finger (the first issue) was not properly toggling it. After a bit of research, I learned that mouse and touch events were combined into one: pointer events. So I switched onClick to onPointerUp and it worked magically.
However, this is where the second issue comes in. If the user clicks the card and drags his or her finger away from it and releases, it still gets toggled (using the mouse doesn't have this same effect). I did some digging and according to MDN, pointer capture could be related:
Pointer capture allows events for a particular pointer event (PointerEvent) to be re-targeted to a particular element instead of the normal (or hit test) target at a pointer's location. This can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (such as by scrolling or panning).
My question is, why is the mouse click working correctly while touching doesn't? And how does one go about disabling the card getting toggled when your finger is dragged away from it?
Codesandbox of sample
Edit: Forgot to mention, I want the card to toggle correctly as long as the touch is released while on the card (even if it is dragged away and returns). This works fine with the mouse, but for touching, it toggles regardless of where your finger is released.
Edit2: Added codesandbox link.
Some things of note: touch-action is set to none (CSS) and this is where the strange behavior happens, but I need to have it set that way to prevent unwanted touch registers like scrolling.
I also noticed that for mouse clicks, you can select a card by clicking outside the card and dragging into it and releasing the click. I guess since the event is onPointerUp that would make sense. Although this effect is undesirable, users will only use touching in my app so it's not something I have to worry about. Regardless, I would like to understand the right way to approach this and how to achieve my desired effects.
When putting i.e. a
TextField textField = new TextField("🗽🎶🎶");
on a form it works perfect on Android but on iOS it gets garbled.
To reproduce:
show the form -> textfield looks it correct
focus it for edit on it by clicking
change nothing, just select done / loose focus
focus it again for edit on it by clicking
The result are strange symbols.
textField.getText().getBytes() - on iOS gives the bytes: -16,-97,-105,-67, ... before the edit (the same sequence as on Android or in the simulator), but -17,-105,-67,-17, ... after ending "edit" (without editing).
It seems that a 4 byte code -16,-97,-114,-74 for the 🎶 gets a 3 byte code -17,-114,-74 after editing.
I would strongly suggest avoiding emoji's in the code itself. This is an issue with our implementation of the iOS UTF-8 parser that was resolved recently: https://github.com/codenameone/CodenameOne/issues/2365
However, it didn't make it into the 4.0 release so this should work within a couple of weeks when we resume the weekly updates.
Short description of the problem:
I have a form in which a group of fields in repeated based on an array of objects.
There is a button which pushes an object into the array. So the user can add as many groups as he like one by one.
There is a select box as the first element of this group.
However, upon clicking the button, the select box is opened automatically after the new group appears.
Steps to reproduce:
1. Visit http://52.66.117.243/app-test/ for testing.
2. Scroll down and click on add more button.
3. The new select box for title automatically opens
Chrome in responsive mode is also able to reproduce the problem
I think the issue might be due to the click event passed on to the newly added select box since the position w.r.t screen of the button is occupied by the new select element. However, I cannot be very sure.
Interestingly, a small timeout before adding of the new elements seems to solve the problem.
If the problem is indeed the click event being propagated, can someone be kind enough to explain what is causing it, event bubbling/capturing on the ng-click or something else ?
Thank you.
I've got a simple A tag:
Link Text
Every now and again IE gets confused the the link stops working. When the mouse hovering over the link, its a normal cursor, on mouse-down it changes to 'not-allowed' and on mouse-up nothing happens.
I can refresh the page and it works normal again for awhile, then it just stops working again.
How can I determine what is happening and fix it? There is no console output, there is script or events on the A tag or any of its parents. IE just borks.
This is an Angular application if it matters at all.
For clarification, I don't want any pointer changes at all, I don't want the link to randomly stop working. I just want the A tag to behave as normal. It does so in all browsers except IE.
I have reduced the length and width of IE browser window. The app loads properly for the first time. Now I have a form which opens on the click of a button on my Homepage. In the form, if I leave a field invalid and I click on save, the code is written such that if there is any field invalid, it will focus on the invalid field. So, with IE10 browser window small, when I leave a field in this form invalid and click on save, the whole app shifts towards left inlcuding the form and the fields inside the form. I have no clue why this is happening. I am using the following code to focus on the invalid field,
child.getEl().dom.scrollIntoView();
I am aware that there is some bug with scrollIntoView when using IE browser. Can someone suggest me the alternative to scrollIntoView()? Thanks in advance!
Used the foloowing instead of scrollIntoView(),
1) field.getEl().focus() to focus on invalid field
2) panel.body.el.scrollTo('Top',0,true) to scroll the form to the top every time we open it