coriolis
coriolis copied to clipboard
EDCD
Mobile number slider no keyboard
(Edit - If I misunderstand the issue, let me know.)
I can take a look at this when I get some time - I notice that (on my iPhone, at least) there's no way to interact with the slider if you're in Voiceover. The cursor will move to the various labels but there doesn't appear to be a way to change them the value itself. (I do have a fair bit of experience debugging these kinds of issues at work for other controls, but not all that familiar with sliders)
Yeah, was talking with @urukcan this morning, he mentioned that on iOS the number sliders don't pop up a keyboard.
Started looking at this - I can get keyboard focus (desktop) to go to the sliders simply by adding "tabIndex="0" to the <svg> element in Slider.jsx. Nothing happens when a key is pressed, but it's a start, at least ;) May need to add a keydown handler similar to what they did here: https://github.com/react-component/slider/issues/131#issuecomment-308567343
I can set focus() on the <svg>, but so far nothing I've tried will open the keyboard on my phone.
I can get the mobile keyboard to open up if I put a text input below the slider, and set focus to it on the onTouchEnd event. PROGRESS!! Edit: I've added some CSS to hide the text box - now I guess we need to decide when we want to set focus on it? This is the only way I've found to get the keyboard to open on my phone - if there is some better way, please don't hesitate to suggest it :)
Got this working reasonably well - input field is 0x0, numeric-only, and is positioned middle-left of the slider element. Keyboard will appear on touchStart event. The page scrolls up, but you can still manipulate the slider without removing finger from screen. Will add some logic to set min/max values and update value as numbers are typed.
This is almost ready for prime time now. Still need to add a tap/hold check (although opening on touch start isn't all that bad - definitely usable the way it's working now) and need to add some desktop keyboard handling as well.
https://github.com/pnellesen/coriolis/tree/feature/%23248_slider_keyboard
Tap/Hold function is working well on Android, but my iPhone Safari will not set focus to the text box (nor open the keyboard) when using a setTimeout to do it (apparently an old issue: https://stackoverflow.com/questions/6866433/focus-not-working-within-settimeout-on-ios). Focus works fine if setting immediately on touchStart.
Edit - may try a different approach using componentDidUpdate() in the text field component and set focus after that finishes rather than in or as a result of the setTimeout (bear with me, I'm still learning React ;) )