Can the search function in a choice component be disabled if the user wishes? I know it’s supposed to be a feature but it forces the keyboard to pop up when using the app on mobile, which blocks virtually all of the items in the list. I’m only using the app in a mobile format, so it’s really annoying having to close the keyboard every time I want to choose an item
1 Like
I’d like to see this happen too. Although in most cases, I find it very convenient to have the cursor automatically “activated” in a text entry field on websites, etc, in this case, I think it makes sense for someone to have to tap that entry field to be able to start typing and activate their keyboard. Honestly, unless there are more than 20 or so choices, I think the more common behavior is to manually search the list and select the option you want.
There are just enough items in my list to trigger the keyboard, even though they would all be visible on screen if the keyboard wasn’t in the way. In terms of user experience, I’d prefer to scroll even if the list was longer as I find the keyboard pop up quite jarring. It also assumes that the user knows what they are looking for, in some cases they might need to see the list before making a selection.
2 Likes
This would be great!
Choice is very difficult to use in my mobile apps. Horrible UI now, as the keyboard blocks all the choices.
Only problem is that currently dropdown choice components are limited to 20 or so items…so without a search, they’d need to overhaul how the dropdown functions.
i see about 98 items in my choice options.
the old app had a search option; You just had to select it to bring up the keyboard (worked great). The problem with the current system, is that the search/keyboard is selected by default. Very annoying on the phone. On the desktop, it works well.
1 Like
Maybe it’s possible to block the search pop-up with custom CSS?
Couldn’t find a CSS solution for this. However, maybe it’s possible to use JavaScript to temporarily set the text-number input to external to make Glide think there’s an external keyboard so it won’t show the touchscreen pop-up.
As far as I know, JavaScript in Glide is used only for transforming data as a column, not to interact with front end stuff.
I’ve found a 50% solution. You use 2 choice components writing to same column. One visible when column value empty and one with column value not empty. Use a choice component with chips when empty and dropdown when not empty.
This way the first time users have to pick, it shows every option instantenously, and it shrinks the list when the user has selected.
Only catch that when a users needs to reselect, the problem remains that a keyboard blocks a part of the list.
For me this option is great because im using it in a form screen where users 99% of the time pick the right one first.
@tuzin.arts posted this in the CSS Library
https://css-library.glide.page/dl/library/s/8836b3/r/ehd2ar4GQcWdJIVeD5gtZw
#root:has(.mychoice) #app-modal-root > div > label {
display: none;
}
This code will hide the search from all dropdowns when the component with .mychoice class is present on the screen (including cases when it’s on the “current” screen under an opened “overlay”/“slide in” screen).
To preview the code results in the builder, you need to turn off “Use compiled CSS” and turn on “Preview custom CSS”.
3 Likes
I’ve seen and tried that, but can’t get it to work. Plus this method saves one click for pressing on the dropdown, it is only lesser when reselecting now
Works for me. Just gotta make sure you do the bold.
The bold?
Yes what I bolded in my post lol.
To preview the code results in the builder, you need to turn off “Use compiled CSS” and turn on “Preview custom CSS”.
The CSS works for me, which makes a huge improvement to my app.
When I first used the code I assumed the bold part was just so we could view the results in the builder, however, if I switch off preview when I finish building, the code doesn’t work in the live app. Keeping preview switched on, even after closing the builder, works in the live app. This is the only CSS code I’ve used that behaves this way.
Not a problem though, I’m just happy it works.
Yea that part is funky, no idea why, but that’s why i highlighted in bold lol
Turning off the “Use Compiled CSS” (~ “Use default CSS”) button means that your CSS will be applied to your application, and vice versa. This button is very useful and is used when there is a clash in your CSS code.
Meanwhile, the “Preview custom CSS” button is only useful in the builder and does not affect your application whether it is on or off.
In another thread, I discussed the functionality of this choice component. The best approach is to shorten it with filters or grouping, not with a search feature, unfortunately, Glide doesn’t have this capability yet. The options should be visible instead of requiring the user to guess the available choices. The search feature is only useful for those who already know the options and want to access them quickly.
In this situation, I think the optimal approach would be to make the popup window shorter instead of removing the search feature. However, the choice is ultimately up to your needs.
#root:has(.dropdown-choice) #app-modal-root > div > ul {
max-height: calc(-120px + 40vh);
}
2 Likes
Your idea is interesting, but it will become a problem again when there are too many options to choose from.