Make ui.input's autocomplete usable on mobile phone

[rodja]

Currently the autocomplete feature of ui.input is unusable on mobile phone. What could be a good technique if there is no TAB button pressable?

[phoskee]

This doubt arose in your code review, and @falkoschindler too, and while I was fixing the code.
I had some time to think about it and thought that perhaps the solution might be to replace the Tab keypress with the Enter keypress.

The question is, wouldn't this affect any on('keypress.enter', foo) entered by the user?

[falkoschindler]

"keypress.enter" could be an option. But it's sometimes used for submitting input fields. That might cause confusion.

[rodja]

Or on('click', foo)? But how to educate the users? In both cases it's not obvious what to do...

[phoskee]

@falkoschindler this is what I am referring to

[rodja]

Or we can maybe leverage the built-in HTML5 datalist element and the autocomplete attribute somehow?

[phoskee]

@rodja @falkoschindler Tried with a list of many cities, it works!
Q;

• Should it be limited to mobile only? On Desktop it becomes a kind of ui.select
• Can be implemented optionally? like input(autocomplete=x, mobile=True)

[rodja]

Should it be limited to mobile only? On Desktop it becomes a kind of ui.select

I think we should enable it by default for desktop. That will help with accessibility.

Can be implemented optionally? like input(autocomplete=x, mobile=True)

I would vote for a parameter popover which is by default True but can be disabled to hide the popover on desktop. Setting popover to False should still use the datalist options on mobile but disable them for desktop.

[phoskee]

Not the best, for my opinion if I wanted something like that I would use ui.select

How do I know the type of device?
I am trying with some js functions but nothing

[rodja]

ChatGPT suggests

  function isMobileDevice() {
    return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
  }

Or use a media-query to hide it for larger devices:

/* Hide the default datalist appearance on devices with a minimum width of 768px */
@media (min-width: 768px) {
  input[list]::-webkit-calendar-picker-indicator {
    display: none;
  }
}

[phoskee]

Unfortunately as an Italian I do not have easy access to ChatGPT, however, I have found several solutions.
The least bad is this one:

async def get_device():
                result = await ui.run_javascript('''
                    const detectDeviceType = () =>
                        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
                            navigator.userAgent
                        )
                            ? 'Mobile'
                            : 'Desktop';

                        detectDeviceType();
                ''', timeout=1)
                print(result)

                if result == 'Mobile':

                    options = ""
                    for opt in autocomplete:
                        options = options + ("<option value='{0}'></option>".format(opt))
                    ui.html('''
                        <datalist id="example-list">
                            {0}
                        </datalist>'''.format(options))
                else:
                    ui.html(' ')

media-query seems not work:

ui.add_body_html('''
            <style>
                
                @media (min-width: 768px) {
                     input[list]::-webkit-calendar-picker-indicator {
                          display: none;
                   }
                 }
            </style>
            ''')

[rodja]

ChatGPT also suggested a combination of QInput, QSelect and QVirtualScroll. Something like this:

<template>
  <div>
    <q-input
      v-model="userInput"
      @input="filterSuggestions"
      label="Search"
      filled
    ></q-input>
    <q-select
      v-if="filteredSuggestions.length > 0"
      filled
      options-dense
      use-input
      v-model="userInput"
      :options="filteredSuggestions"
      behavior="dialog"
      @filter="filterSuggestions"
    >
      <template v-slot:before>
        <q-virtual-scroll
          :items="filteredSuggestions"
          :item-height="40"
          :items-size="filteredSuggestions.length"
          class="col-auto"
        >
          <template v-slot="{ item, index }">
            <q-item clickable @click.stop="userInput = item">
              <q-item-section>{{ item }}</q-item-section>
            </q-item>
          </template>
        </q-virtual-scroll>
      </template>
    </q-select>
  </div>
</template>

[falkoschindler]

This looks like re-inventing the autocompletion once again. We already have the ui.select with input field.

[phoskee]

My intention was to implement something simple that would give a little extra.

What do you think of a slot with an icon that appears along with the shadow-text? maybe too cumbersome..
Call up the function with the spacebar? Wouldn't work with an input of a phrase..

[phoskee]

With "keypress.enter" seems to work without any problems:

from nicegui import ui

def work():
    ui.notify('Some other task done')

options = ['Awesome', 'NiceGUI', 'AbCdE']
ui.input(autocomplete=options).on('keydown.enter', work)

ui.run()

[rodja]

Nice. So we would simply allow ENTER and TAB?

[falkoschindler]

Yes, with the downside of #852 (reply in thread).

[phoskee]

No wait, only ENTER!

[falkoschindler]

After considering @phoskee's PR #879, which runs a JavaScript function for every ui.input to check if the browser is desktop or mobile, we tend towards a pure frontend implementation: We would wrap q-input with a custom Vue component and implement the desktop-mobile check right in JavaScript. This avoids async calls while constructing elements that depend on a client connection. And it resolves the possible conflict for the shared auto-index client which might be connected to desktop and mobile devices.

[falkoschindler]

By the way: The wrapper could also implement the auto-completion in JavaScript. This would greatly reduce the latency, which is currently caused by sending user input and auto-suggestion back and forth between JavaScript and Python.

[falkoschindler]

This feature has been implemented in PR #1063.