diff --git a/js/utils/tap.js b/js/utils/tap.js index e45a7b416e..e378c2463e 100644 --- a/js/utils/tap.js +++ b/js/utils/tap.js @@ -183,7 +183,8 @@ function triggerMouseEvent(type, ele, x, y) { function tapClickGateKeeper(e) { // do not allow through any click events that were not created by ionic.tap - if( ionic.scroll.isScrolling || !e.isIonicTap && !tapRequiresNativeClick(e.target) ) { + if( (ionic.scroll.isScrolling && ionic.tap.containsOrIsTextInput(e.target) ) || + (!e.isIonicTap && !tapRequiresNativeClick(e.target)) ) { console.debug('clickPrevent', e.target.tagName); e.stopPropagation(); diff --git a/js/views/scrollView.js b/js/views/scrollView.js index 087b692825..0a487d3058 100644 --- a/js/views/scrollView.js +++ b/js/views/scrollView.js @@ -767,7 +767,7 @@ ionic.views.Scroll = ionic.views.View.inherit({ var mousedown = false; container.addEventListener("mousedown", function(e) { - if ( ionic.tap.ignoreScrollStart(e) ) { + if ( ionic.tap.ignoreScrollStart(e) || e.target.tagName === 'SELECT' ) { return; } self.doTouchStart([{ diff --git a/scss/_select.scss b/scss/_select.scss index f1327ea6a6..9037a1bdec 100644 --- a/scss/_select.scss +++ b/scss/_select.scss @@ -4,88 +4,45 @@ * -------------------------------------------------- */ - -// shared styles for transparent select elements -.select-inline select, -.item-select select { - @include appearance(none); - border: none; - background: transparent; - color: #333; - - // hack to hide default dropdown arrow in FF - text-indent: 1px; - text-overflow: ''; - - white-space: nowrap; - font-size: $font-size-base; - - cursor: pointer; -} - -.select-inline { - position: relative; - display: inline-block; - overflow: hidden; - border: $input-border-width solid $input-border; - border-radius: 2px; - background-color: $input-bg; - color: $input-color; - - vertical-align: middle; - font-size: $font-size-base; - line-height: $font-size-base + 2; - - select { - padding: 6px 25px 7px 8px; - } -} - -.select-inline + .select-inline { - margin-left: 6px; -} - .item-select { position: relative; select { + @include appearance(none); position: absolute; top: 0; right: 0; - padding: ($item-padding - 2) ($item-padding * 3) ($item-padding) 5px; - width: 100%; + padding: ($item-padding - 2) ($item-padding * 3) ($item-padding) $item-padding; + + border: none; + background: transparent; + color: #333; + + // hack to hide default dropdown arrow in FF + text-indent: .01px; + text-overflow: ''; + + white-space: nowrap; + font-size: $font-size-base; + + cursor: pointer; direction: rtl; // right align the select text - - &:focus { - min-width: 30%; - width: auto; // shrink width when opened - } } -} - -// shared styles for dropdown arrow -.select-inline:after, -.item-select:after { - position: absolute; - top: 50%; - margin-top: -3px; - width: 0; - height: 0; - border-top: 5px solid; - border-right: 5px solid rgba(0, 0, 0, 0); - border-left: 5px solid rgba(0, 0, 0, 0); - color: #999; - content: ""; - pointer-events: none; -} - -.select-inline:after { - right: 7px; -} - -.item-select:after { - right: $item-padding; + &:after { + position: absolute; + top: 50%; + right: $item-padding; + margin-top: -3px; + width: 0; + height: 0; + border-top: 5px solid; + border-right: 5px solid rgba(0, 0, 0, 0); + border-left: 5px solid rgba(0, 0, 0, 0); + color: #999; + content: ""; + pointer-events: none; + } } select { diff --git a/test/html/tapInputs.html b/test/html/tapInputs.html index b2449d34a3..5b27fc4d03 100755 --- a/test/html/tapInputs.html +++ b/test/html/tapInputs.html @@ -85,6 +85,69 @@ Watch Count: {{ radioWatchCount }} +