Chosen on iPad leaves behind cursor after selection

[jim-at-miramontes]

When you do a selection from a Chosen select on an iPad, a blinking cursor gets left behind after the selection (see below, from the Chosen webpage). The cursor disappears when the select loses focus.

[koenpunt]

This is a known issue and has been accepted as such. See #2727 for more details.

[tammytee]

I encountered the same issue with Chosen on iPad. I've added the following lines to my style overrides for Chosen to only show the cursor when a select that has a search input is open:

.chosen-container {
    .chosen-search-input {
            user-select: none !important;
    }
    &.chosen-container-single-nosearch {
        .chosen-search-input {
             user-select: none !important;
        }
        &.chosen-with-drop .chosen-search-input {
             user-select: none !important;
        }
    }

    &.chosen-with-drop {
        .chosen-search-input {
            user-select: all !important;
        }
    }
}

[adamcadot]

I got the code supplied by @tammytee to work by making it more general:

.disable-select
{
  -webkit-touch-callout: none !important; /* iOS Safari */
    -webkit-user-select: none !important; /* Safari */
     -khtml-user-select: none !important; /* Konqueror HTML */
       -moz-user-select: none !important; /* Firefox */
        -ms-user-select: none !important; /* Internet Explorer/Edge */
            user-select: none !important; /* Non-prefixed version, currently
                                             supported by Chrome and Opera */
}
.chosen-container
{
    .chosen-search-input
    {
            .disable-select;
    }
    &.chosen-container-single-nosearch
    {
        .chosen-search-input
        {
             .disable-select;
        }
        &.chosen-with-drop .chosen-search-input
        {
             .disable-select;
        }
    }
    &.chosen-with-drop
    {
      .disable-select;
    }
}

[jim-at-miramontes]

Works for me -- thanks!

…

On Apr 15, 2018, at 3:47 PM, Adam Cadot ***@***.***> wrote: I got the code supplied by @tammytee to work by making it more general: .disable-select { -webkit-touch-callout: none !important; /* iOS Safari */ -webkit-user-select: none !important; /* Safari */ -khtml-user-select: none !important; /* Konqueror HTML */ -moz-user-select: none !important; /* Firefox */ -ms-user-select: none !important; /* Internet Explorer/Edge */ user-select: none !important; /* Non-prefixed version, currently supported by Chrome and Opera */ } .chosen-container { .chosen-search-input { .disable-select; } &.chosen-container-single-nosearch { .chosen-search-input { .disable-select; } &.chosen-with-drop .chosen-search-input { .disable-select; } } &.chosen-with-drop { .disable-select; } } — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.