Chosen: Chosen on iPad leaves behind cursor after selection

Created on 30 Jul 2017 · 4Comments · Source: harvesthq/chosen

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.

Source

jim-at-miramontes

Most helpful comment

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;
        }
    }
}

TammyTee on 20 Feb 2018

👍2

All 4 comments

This is a known issue and has been accepted as such. See https://github.com/harvesthq/chosen/pull/2727 for more details.

koenpunt on 30 Jul 2017

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;
        }
    }
}

TammyTee on 20 Feb 2018

👍2

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;
    }
}

adamcadot on 16 Apr 2018

Works for me -- thanks!

On Apr 15, 2018, at 3:47 PM, Adam Cadot notifications@github.com 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.