Select search field does not auto-focus on Safari

[davidbanham]

On Firefox and Chrome when you open a Select control, the search field is auto-focused. On mobile, this causes the on-screen keyboard to activate and makes it obvious the list is searchable.

On iPad and iPhone, the input is not focused. By default, there is no search text placeholder, either. The result is that users on these devices often do not realise there is any way to filter the list and instead scroll it.

My preferred solution would be to auto-focus the search input on all platforms.

From a cursory read of the code it's not clear to me whether the intention is to grab focus or not. I'm happy to take a run at a PR on this but I'd like to understand the intention of the existing code before I do.

Thanks!

[darrensw777]

I've just noticed this too which is pretty annoying for the UX. Did you have a look at a PR? If not I might this week, time allowing.

[davidbanham]

I haven't looked at a PR yet, no. Was holding off until the project maintainers gave some direction on why the existing behavior is like it is.

[stale[bot]]

Thanks for contributing to this issue. As it has been 60 days since the last activity, this issue is being automatically closed. This is often because the request was already solved in some way and it just wasn't updated or it's no longer applicable. If that's not the case, please do feel free to either reopen this issue or open a new one. We'll gladly take a look again!

[AdamWills]

This issue still exists, including on the demo page.

[natebeaty]

Having issues with this also and would love a fix. It's unintuitive (and not obvious to user) tapping twice to search the choices. (I just switched from an ancient MooTools clone of Chosen and find it strange it handled this better.)

[AdamWills]

Safari doesn't seem to allow you to programmatically change the focus. Other tools likely use the same input field for the initial input + search, whereas Choices seems to use a separate input field for the search field.

[midzer]

bump

[ribeirobreno]

Safari doesn't seem to allow you to programmatically change the focus. Other tools likely use the same input field for the initial input + search, whereas Choices seems to use a separate input field for the search field.

It actually can. After doing a quick Google search, the consensus seems to be the feature is buggy but it definitely works, try this: https://jsfiddle.net/2cne5rop/8/

edit: updated the fiddle due to it not triggering in an older safari.

[mattisvensson]

I ran into the same problem and managed to come up with a workaround that might interest some of you facing the same issue. Now, when the user clicks on an input field, the keyboard comes up and the input field from choices is focused. No need for a second click interaction.

So, the problem was with getting my input for choices to behave correctly. Strangely enough, using the input itself as an event listener didn't quite work for me (still scratching my head about why). So, I found a workaround using an invisible button placed on top of the input. Here's what I did:

<div>
     <!-- add an invisible button on top of the input for choices -->
      <button class="absolute w-full h-full opacity-0 z-50 buttonRef" aria-hidden="true"></button>

      <!-- input for choices -->
      <select id="input"></select>
      <label for="input">Label</label>
  </div>

Assuming you've got your choices setup running smoothly, let's dive into the JavaScript part:

// get the new button
const button = document.querySelector('.buttonRef')

// get the input field you want to focus (this is created by choices deeply nested in other elements)
const input = this.$el.querySelector('.choices__input.choices__input--cloned')

// add a click event listener to the button
button.addEventListener('click', (e) => {
  // show dropdown
  choices.showDropdown()

  // pass the input to the function
  focusAndOpenKeyboard(input)
})

// Prevent event bubbling and infinite loop (because we are "clicking" it in the function below")
input.addEventListener('click', (e) => {
  e.stopPropagation()
})

function focusAndOpenKeyboard(el) {
  if (el) {
    // Align temp input element approximately where the input element is
    // so the cursor doesn't jump around
    const __tempEl__ = document.createElement('input')
    __tempEl__.style.position = 'absolute'
    __tempEl__.style.top = `${el.offsetTop + 7}px`
    __tempEl__.style.left = `${el.offsetLeft}px`
    __tempEl__.style.height = 0
    __tempEl__.style.opacity = 0
    // Put this temp element as a child of the page <body> and focus on it
    document.body.appendChild(__tempEl__)
    __tempEl__.focus()

    // The keyboard is open. Now do a delayed focus on the target element
    setTimeout(() => {
      el.focus()
      el.click()
      // Remove the temp element
      document.body.removeChild(__tempEl__)
    }, 100)
  }
}

I got the focusAndOpenKeyboard function from this StackOverflow answer

While it would be preferable to have Choices integrate or fix this directly, given that this problem has persisted for more than 4 years, I believe we're left with no choice but to continue using this workaround.

Hope this helps!