Suggestions-list dropdown UI isn't responsive for touch devices

[Foine]

Hello, first of all excuse my poor english.

I don't know if it's a bug or not, but on Android, it's almost impossible to select a tag from the whitelist when it's displayed as a dropdown.

When the field is focus, keyboard open and whitelist is showed. But then, when I touch a choice, keyboard is closing but nothing is selected in the tag input. I saw that the tag is correctly selected when I focus the field, close the keyboard manually, then choose a tag.

Additionally to that, when the keyboard is open, Android set the window height to something so small that the dropdown is often displaying only the top part, even if the dropdown is going outside of the window by the top.

[yairEO]

Well... that does seem like a problem.. more like a UI problem. I will sure to examine it. I've made Tagify for large-area usage and did not test much on low-area scenarios with keyboard hiding most of the screen. I will test and let you know, this might not be easily solvable because it requires thinking outside-of-the-box

[Foine]

Thank you for your concern !

I agree with you : it's not easily solvable. I searched during one entire day and didn't find any workout.

[aicodex]

I have same problem.

[aicodex]

I saw some other website like baidu. when you click the input control, it will be move to the top of the screen, and the dropdown list in the bottom of the input control. They seem to a fullscreen layer, I can't see anything but the input box and dropdown list. I guess the key problem is the toggle keyboard.

[yairEO]

I have an idea on how to solve this, I only need the free-time to do it.. it would take at least 7 hours I think.

https://ux.stackexchange.com/q/9399/6154

[elialbert]

Hey - I'd like to chime in here since I just spent a few hours fighting with this.

There is a positioning bug related to the whole "top" vs "bottom" flip for small view sizes: https://github.com/yairEO/tagify/blob/master/src/tagify.js#L2362 somewhere around there. Sometimes in a really small vertical viewport, this stuff sends the dropdown above the screen.

I was able to switch to manual mode, and after a bit of hacking, got it to work on small devices. specifically, the dropdown is still position absolute, but now it's attached to a position relative dom node to keep it in place instead of absolute on the page. this is in a modal btw.

relatedly, I added a lot of tagify.DOM.dropdown.style.cssText = '';

in various event callback functions, because I don't want tagify to be manually positioning my dropdown when I'm in manual dropdown mode. Perhaps in that same dropdown position function you could have a short circuit to that effect?

Also found a typo in the code! The documentation has an option for dropdown.className, but this line: https://github.com/yairEO/tagify/blob/master/src/tagify.js#L245 is looking for dropdown.classname (capital N missing).

tl;dr - dropdown: 'manual' + overriding positioning made this work without too much trouble

[elialbert]

also - you can reproduce all of this in chrome devtools by setting vertical to 300 pixels, and searching to trigger the dropdown when the input is very close to the bottom of the viewport. you will see that 1) the dropdown does not show at all and 2) subsequently, if you scroll around and manage to get it to show, the select is not actually selecting what you click on anymore.

[yairEO]

just checked on Chrome on my Android it everything seems to work fine. I couldn't get to a scenario where I couldn't select something or the list of suggestion was not visible/accessible

[elialbert]

interesting not sure what to tell you. did you open the dev tools and set the vertical size too low, as I mentioned?

[yairEO]

yeah, I am testing on a real phone, with different scenarios:

1. lots of text before Tagify, so the tagify element is at the bottom
2. lots of text after Tagify so Tagify is at the top
3. no text at all

[elialbert]

I was able to reproduce on desktop chome as well if that's any easier. not sure what to tell you beyond that, I guess I could make a video if you'd like.

[elialbert]

On reflection, I guess my use case is already specific enough, and customized enough from the base case, that it's probably not worth your trying to reproduce further. but thanks for checking! was the other info in my original post useful? (classname typo and manual positioning?)

[yairEO]

@elialbert - I think a video would help because I don't know what setup you are having on your page. also please share any Tagify settings you might have applied. for testing I a 10-items array whitelist and

{
  dropdown: {
    enabled: 0
  }
}

[aicodex]

I use tagify to write a cross platform web, in android device. my inputbox are near the bottom of the screen. when i click it and want to click a dropdown item, I saw the dropdown just a flash on the top of the input, but after that it become to under the input, and the item can't click. maybe the switch of the dropdown cause the click event useless. I think the best way to select it in mobile device is like baidu.com or google.com , when user click the input, it become fullscreen and in the top of the screen. and then toggle the dropdown.

[elialbert]

@aicodex - two separate things here. clearly there could be a different UI that was easier to use on mobile. but we're both also describing a bug related to repositioning the dropdown. that should be easier to fix and probably a higher priority. @yairEO I bet you that the dropdown repositioning is the problem. What if there were an option to attach the dropdown to the input instead of have it absolute on the page? If I work on that would you review my PR?

[yairEO]

@elialbert - I honestly don't understand how the repositioning is the problem..

I've made a test page where the tagify element is at the bottom of the page (nothing is after it) and the dropdown is opening fine, I am able to choose tags and they are being added.

[elialbert]

awesome video! yeah, in the video it is working perfectly for sure. in my case the css bottom value got set to -467 and the drop down was off the page. do you have a way I could email you a video? or we could work together? also as I said before, if you don’t have time to work on this I dont think it’s very common.

[aicodex]

Maybe you can try my website, it's a crowd sourcing platform. sign up and login use your mobile, select "当前任务"(current mission) as en_lufe_practice, and click "开始考试"(begin exam), select able, click "下一步"(next)， then click "下一步" again, select "write" and click inputbox under "请录入FE标准名称" , then it will toggle a tagify dropdown, and hard to click… oh the url is:(forget my poor design) http://159.226.21.226/crowd_sourcing

[aicodex]

Here is the gif, every the keyboard dismiss is after i clicked a dropdown item ,except that time it interrupt i to delete tag . And always just like I never click a dropdown item. And sometime the dropdown not perform switch from bottom to top, the dropdown item can click, and add a tag correctly. But it just apear in some i don't know's condition, like the space height under the input just bigger than the dropdown list height? I have opened the pointer of my touch, but because the FPS just 23/sec, so can't see it. I guess the dropdown list can't respond my click is because the dropdown list switch from the bottom of the input to the top of it or maybe because the screen perform an auto scroll with the keyboard switch on ?

[aicodex]

I record the video again and use fps 60/sec, but i can't recurring how to add tag correctly... you can just see previous comment, some time it can add correctly.

This is other website to deal with dropdown list that with my prefer way. After click the input, it become a fullscreen layer, and the input go to the top of the screen, you needn't care the dropdown should going to where.

[yairEO]

@aicodex - I don't really understand what's going on... maybe if you close this template and create a simple demo to show me the issue.

[waqar-ahmed]

@yairEO Hi, I ran into the similar problem. If I populate the tagify input with whitelist, I can see the drop-down on web view. But when I change the view to mobile, the drop-down disappears, until I click at the position where the dropdown is present. Here is the jsbin for it:

https://jsbin.com/winimipezi/edit?html,js,output

Please change the view to mobile to see the bug.

Also, attached are screenshots from the demo website where I see the similar problem.

• In web view, scroll bar is always visible.

• When I switched to mobile view, scroll bar disappears, and when I scroll, the whole page scroll instead of the tagify items.

• When I click around the tagify items scrollbar position, then it becomes visible again.

It would be great, if you can provide any solution to fix this problem.

Thank you.