https://i.sstatic.net/muMSG.png
One challenge I am facing is related to several inputs housed within an LI and div that are sortable using jQuery.
The problem arises specifically on the iPad when attempting to click into the inputs to enter information - there is no caret appearing, rendering the input unusable.
This issue seems to be isolated only to these inputs wrapped inside the LI, as other inputs on the page do not encounter the same problem.
Interestingly, if I initially click into a different input and then navigate through them using the 'Next' button on the iPad, it allows me to access and edit the problematic input.
I have attempted raising the z-index and implementing clearfix, but these solutions do not resolve the issue. Are there any suggestions for fixing this?
Clearfix:
overflow: auto;
zoom: 1;
Notably, the functionality of the C and X buttons seen in the image is unaffected; the issue appears to be specific to these particular inputs that are wrapped.