[Native Select] Dropdown dowward arrow not linking to displaying full list

[Native Select] Dropdown dowward arrow not linking to displaying full list

  
Forge Component
(6)
Published on 2017-05-31 by Miguel Vicente
6 votes
Published on 2017-05-31 by Miguel Vicente

The select box mostly is responsive, but the downward pointing arrow on the right doesn't respond to clicks. Unfortunately that is the one bit I anticipate users trying to click on.

Am a bit out of my depth looking at this kind of plugin. I did try but cant figure out what causes the full list to be displayed.

I'd like to have a look... but I can't even get it configured.  There's so few instructions for these Forge Components.

Could you build a quick app containing the Native Select and attach the oml... then I could have a look.

Hi @Davidk,

Inside my component I have already a sample how to use the native dropdown. 

Could you explore the sample and if you have questions regarding the component then please let me know. 

Kind Regards,

Miguel Vicente  

Hi @Dan ONeill

Could you provide me a sample for me to test an see which could be the problem? 

I'm guessing that you have some css missing or you add something more that are causing that issue.

Please check if you have css property like "pointer-events: none; on the

select-dropdown:after

Let me know if you solved the problem or if you need further help on the component.

Thank you,

Kind Regards,

Miguel Vicente 

Miguel Vicente wrote:

Hi @Davidk,

Inside my component I have already a sample how to use the native dropdown. 

Could you explore the sample and if you have questions regarding the component then please let me know. 

Kind Regards,

Miguel Vicente  

Excellent... thanks Miguel... I didn't know the sample was in the component.  I'd added the component to my app and then went to work on it.  If you could add a note about the sample to your Forge component listing it may help others.  I also see that you're building a List with static data in the OnInitialize event... so now I know where you're getting your sample dropdown data from.

The "dropdown arrow" is a css pseudo element... and is therefore... not clickable.  I can confirm what Dan has found... in that if you manage to click, or tap, directly on that area... the dropdown will not fire.  I've confirmed that pointer-events:none; is in place.  I've tried, with css, to make the pseudo-after area larger... but no luck.

Really nice dropdown, by the way... very slick.



If I load the sample on its own the downward arrow does work fine, its when I put it in an app that the thing stops working (rest of the container still works you understand, jsut not the dropdown arrow). I'm sure you are right in that some css is being blocked by something in my app. I cant think how though as I have zero self-made css, just that which is deault in a standard silkui version 10 mobile app. Your app doesn't happen to use the same css as something in that I suppose? Sorry, I should figure that out myself - you've given enough hints alread and as david says its a really nice widget. When I get time I'll do some 'inspect'ing and track down the missing / overridden css.


Thanks!!

@Davidk and @Dan

Thank you so much for your feedback! 

I will update the component description to specify what I have inside this component. I also will try to check if I can simplify the way of clicking in the arrow to fire native dropdown! 

I will let you know when I upload a new version.

Thank you once again! 

Kind Regards,

Miguel Vicente  

I've just implemented this in a test app I have.  On my Nexus P6 (Android 8) it's perfect.  On my Nexus 7 (2013) (Android 6) it's a bit hit and miss... maybe 2 times out of 10 it doesn't drop down.  But I feel this is the tablet... not the plugin... because the dropdown is completely different as well.  On the Nexus 7 it's just a simple dropdown... not the really nice dropdown interface.