Bug: Multi-model select dropdown is wonky on mobile devices

[daveschumaker]

trafficstars

Speaking of multi-model, every time I open that drop-down on my tablet or phone, it scrolls the page and the top item in the menu gets cut off... Not scrolling would probably be the easiest way to deal with it, let the user scroll if necessary. It makes it very hard to select a bunch of models if I want only ~half of them instead of all

Via Discord: https://discord.com/channels/781145214752129095/1038867597543882894/1085604055524573244

[anonderpling]

Just a note: while this happens in mobile, I haven't seen it happening on desktop. Might just be because the window is too big to need it, though. It might be worth seeing if you can prevent the keyboard from popping up on the first tap and require a second tap for actual text input.

I should note that the drop-down doesn't actually pop up every single time, too.

---

Having the ability to save presets for which models get loaded would go a long way to making this irrelevant, too (I could set a photo preset for an the photorealistic models I like, an artistic preset, and so on, then just use that preset and have 30 models selected at once).

In the meantime, I'm getting by with a bit of script that modifies the localStorage key then reloading:

chModel = (models) => {
    var i=JSON.parse(localStorage.PromptInputSettings);
    i.models=models;
    localStorage.PromptInputSettings=JSON.stringify(i);
}

usually end up typing them out one at a time, though, which is inconvenient...i should add it to my userscripts...

[anonderpling]

I just confirmed this is caused by the keyboard. document.querySelectorAll('.css-vnritt-control .css-1qubu1 input#react-select-long-value-select-input')[2].inputMode='none' fixes it. A possible partial fix for the issue without preventing searches is to have a second text entry to filter the list, or to change the inputmode when tapping a second time.

Some links:

• https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
• https://github.com/alvarotrigo/fullPage.js/issues/145#issuecomment-355388252
• react-specific https://egghead.io/lessons/react-native-prevent-the-on-screen-keyboard-from-covering-up-text-inputs
• https://www.npmjs.com/package/body-scroll-lock